Function LiveClient

freebuff/web/src/app/live/live-client.tsx:522–597

({
  initialStats,
}: {
  initialStats: FreebuffLiveStats
})

}

export default function LiveClient({
  initialStats,
}: {
  initialStats: FreebuffLiveStats
}) {
  const [hasMounted, setHasMounted] = useState(false)
  const stats = useLiveStats(initialStats)

  useEffect(() => {
    setHasMounted(true)
  }, [])

  return (
    <main className="min-h-screen bg-black text-white">
      <section className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0 bg-[linear-gradient(rgba(124,255,63,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(34,211,238,0.05)_1px,transparent_1px)] bg-[size:56px_56px]" />
        <div className="relative container mx-auto px-4 pb-6 pt-10 md:pb-8 md:pt-14">
          <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
            <div className="max-w-4xl">
              <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
                <h1 className="relative max-w-3xl pl-7 font-serif text-4xl leading-tight text-white md:pl-8 md:text-6xl">
                  <span
                    aria-hidden
                    className="absolute left-0 top-[0.43em] h-3 w-3 -translate-y-1/2 md:h-4 md:w-4"
                  >
                    <motion.span
                      className="block h-full w-full rounded-full bg-acid-matrix shadow-[0_0_18px_rgba(124,255,63,0.9)]"
                      animate={{
                        opacity: [0.45, 1, 0.45],
                        scale: [0.86, 1.18, 0.86],
                      }}
                      transition={{
                        duration: 1.8,
                        repeat: Infinity,
                        ease: 'easeInOut',
                      }}
                    />
                  </span>
                  Freebuff live
                </h1>
                {hasMounted && (
                  <span className="whitespace-nowrap text-sm text-white/45 md:text-base">
                    Updated {formattedTime(stats.generatedAt)}
                  </span>
                )}
              </div>
              <p className="mt-4 max-w-2xl text-base leading-7 text-white/54 md:text-lg">
                Real-time Freebuff sessions across every country.
              </p>
            </div>

            <LiveUsersHero value={stats.totalLiveUsers} />
          </div>
        </div>
      </section>

      <section className="container mx-auto px-4 pb-8 pt-5 md:pb-10 md:pt-6">
        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.85fr)_minmax(330px,0.78fr)]">