Spaces:
Sleeping
Sleeping
File size: 2,835 Bytes
9492321 72c8847 9492321 5ab527f 9492321 dfb0010 9492321 dfb0010 9492321 dfb0010 9492321 dfb0010 9492321 dfb0010 9492321 5ab527f 9492321 72c8847 9492321 4bf8d80 9492321 4bf8d80 9492321 5ab527f 9492321 5ab527f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | import React, { useState } from 'react'
export default function StatsBar({ overview, viewportSummary, featureCount, loading, isMobile }) {
const [collapsed, setCollapsed] = useState(false)
if (!overview) return null
const cards = [
{
label: 'In View',
value: viewportSummary?.count || featureCount,
icon: '📍',
desc: 'Entities visible on map',
},
{
label: 'Mapped',
value: overview.total_entities,
icon: '🏢',
desc: 'Curated entities in our database',
},
{
label: 'Startups',
value: overview.by_type?.startup || 0,
icon: '🚀',
desc: 'Mapped startups (India has 223K+ DPIIT-registered)',
},
{
label: 'Unicorns',
value: overview.unicorn_count || 0,
icon: '🦄',
desc: 'Valued >$1B',
},
{
label: 'Women-led',
value: overview.women_led_count || 0,
icon: '👩',
desc: 'In our dataset (India has 102K+ women-led startups)',
},
{
label: 'Funding',
value: overview.total_funding_display,
icon: '💰',
desc: 'Mapped entities only — not total Indian startup funding',
isText: true,
},
]
return (
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 pointer-events-none">
{/* Collapse toggle */}
<div className="flex justify-center mb-2">
<button
onClick={() => setCollapsed(!collapsed)}
className="pointer-events-auto glass rounded-full px-3 py-1 text-xs text-atlas-muted hover:text-atlas-text transition-colors shadow-lg"
>
{collapsed ? '▲ Show Stats' : '▼ Hide'}
</button>
</div>
{!collapsed && (
<div className={`flex items-stretch gap-2 sm:gap-3 px-3 sm:px-4 pointer-events-auto animate-fade-in ${isMobile ? 'overflow-x-auto pb-1 scrollbar-thin' : ''}`}>
{cards.map((card) => (
<div
key={card.label}
className="relative rounded-2xl border border-atlas-border bg-atlas-bg/90 shadow-lg px-3 sm:px-4 py-2.5 sm:py-3 min-w-[100px] sm:min-w-[120px] cursor-default"
title={card.desc}
>
<div className="flex items-start gap-2.5">
<span className="text-lg mt-0.5">{card.icon}</span>
<div>
<p className="text-base font-bold text-atlas-text leading-none tabular-nums">
{typeof card.value === 'number' ? card.value.toLocaleString() : card.value}
</p>
<p className="text-[10px] text-atlas-muted leading-none mt-1.5 uppercase tracking-wider font-medium">
{card.label}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
)
}
|