Function CompactLiveStats

freebuff/web/src/app/live/live-client.tsx:360–398

({
  initialStats = EMPTY_LIVE_STATS,
}: {
  initialStats?: FreebuffLiveStats
})

}

export function CompactLiveStats({
  initialStats = EMPTY_LIVE_STATS,
}: {
  initialStats?: FreebuffLiveStats
}) {
  const stats = useLiveStats(initialStats, { refreshOnMount: true })
  const isLoading = stats.generatedAt === EMPTY_LIVE_STATS.generatedAt

  return (
    <section className="relative overflow-hidden bg-black py-14 md:py-20">
      <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]" />
      <div className="relative container mx-auto px-4">
        <div className="mb-6 flex flex-col gap-3 md:mb-8 md:flex-row md:items-end md:justify-between">
          <div>
            <div className="flex items-center gap-3">
              <motion.span
                className="h-2.5 w-2.5 rounded-full bg-acid-matrix shadow-[0_0_20px_rgba(124,255,63,0.95)]"
                animate={{ opacity: [0.45, 1, 0.45], scale: [0.8, 1.2, 0.8] }}
                transition={{
                  duration: 1.9,
                  repeat: Infinity,
                  ease: 'easeInOut',
                }}
              />
              <span className="font-mono text-xs uppercase tracking-[0.22em] text-white/48">
                Active users
              </span>
            </div>
            <div className="mt-2 font-mono text-5xl font-medium leading-none text-acid-matrix neon-text md:text-7xl">
              {isLoading ? '...' : stats.totalLiveUsers.toLocaleString()}
            </div>
          </div>
        </div>

        <WorldMap stats={stats} compact isLoading={isLoading} />
      </div>
    </section>
  )
}

function ModelBars({ stats }: { stats: FreebuffLiveStats }) {
  const maxCount = Math.max(1, ...stats.models.map((model) => model.count))