({
initialStats = EMPTY_LIVE_STATS,
}: {
initialStats?: FreebuffLiveStats
})
| 93 | } |
| 94 | |
| 95 | export function HomepageLiveStats({ |
| 96 | initialStats = EMPTY_LIVE_STATS, |
| 97 | }: { |
| 98 | initialStats?: FreebuffLiveStats |
| 99 | }) { |
| 100 | const { sectionRef, stats } = useHomepageLiveStats(initialStats) |
| 101 | const isLoading = stats.generatedAt === EMPTY_LIVE_STATS.generatedAt |
| 102 | const topCountries = stats.countries.slice(0, 4).map((country) => ({ |
| 103 | label: countryName(country.countryCode), |
| 104 | value: country.count, |
| 105 | })) |
| 106 | const topModels = stats.models.slice(0, 4).map((model) => ({ |
| 107 | label: model.displayName, |
| 108 | value: model.count, |
| 109 | })) |
| 110 | const countryEmptyLabel = isLoading |
| 111 | ? 'Loading active countries...' |
| 112 | : 'No active countries yet.' |
| 113 | const modelEmptyLabel = isLoading |
| 114 | ? 'Loading active models...' |
| 115 | : 'No active models right now.' |
| 116 | |
| 117 | return ( |
| 118 | <section |
| 119 | ref={sectionRef} |
| 120 | className="relative overflow-hidden bg-black py-14 md:py-20" |
| 121 | > |
| 122 | <div className="absolute inset-0 bg-[linear-gradient(rgba(124,255,63,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(34,211,238,0.035)_1px,transparent_1px)] bg-[size:56px_56px]" /> |
| 123 | <div className="relative container mx-auto px-4"> |
| 124 | <div className="grid gap-6 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-end"> |
| 125 | <div> |
| 126 | <div className="flex items-center gap-3"> |
| 127 | <span className="h-2.5 w-2.5 rounded-full bg-acid-matrix shadow-[0_0_20px_rgba(124,255,63,0.9)]" /> |
| 128 | <span className="font-mono text-xs uppercase tracking-[0.22em] text-white/48"> |
| 129 | Active users |
| 130 | </span> |
| 131 | </div> |
| 132 | <div className="mt-3 font-mono text-6xl font-medium leading-none text-acid-matrix neon-text md:text-8xl"> |
| 133 | {isLoading ? '...' : stats.totalLiveUsers.toLocaleString()} |
| 134 | </div> |
| 135 | <Link |
| 136 | href="/live" |
| 137 | className="mt-6 inline-flex items-center gap-2 rounded-md border border-acid-matrix/45 bg-acid-matrix/10 px-4 py-2 text-sm font-medium text-acid-matrix transition-colors hover:bg-acid-matrix/15" |
| 138 | > |
| 139 | <span>View live map</span> |
| 140 | <ArrowRight className="h-4 w-4" aria-hidden /> |
| 141 | </Link> |
| 142 | </div> |
| 143 | |
| 144 | <div className="grid gap-4 md:grid-cols-2"> |
| 145 | <LiveRows |
| 146 | title="Top countries" |
| 147 | icon={Globe2} |
| 148 | rows={topCountries} |
| 149 | emptyLabel={countryEmptyLabel} |
| 150 | /> |
| 151 | <LiveRows |
| 152 | title="Models" |
nothing calls this directly
no test coverage detected