Skyline: Lights On

"use client";

import * as React from "react";

import { Skyline } from "@/components/ui/skyline";

const DESKS = 240;
const START = 148;

// A night-owl coworking club: every lit window is a member at a desk right now.
export function SkylineLightsDemo() {
  const [here, setHere] = React.useState(START);
  const [joined, setJoined] = React.useState(false);

  // People come and go every few seconds.
  React.useEffect(() => {
    const id = window.setInterval(() => {
      setHere((n) => Math.min(DESKS - 12, Math.max(90, n + Math.round(Math.random() * 14 - 6))));
    }, 2600);
    return () => window.clearInterval(id);
  }, []);

  const count = here + (joined ? 1 : 0);

  return (
    <div className="w-full max-w-3xl overflow-hidden rounded-2xl border border-zinc-950/10 bg-[#fafaf9] text-zinc-950 dark:border-white/10 dark:bg-[#07080c] dark:text-zinc-100">
      <div className="flex flex-wrap items-end justify-between gap-5 px-6 pt-7 sm:px-8 sm:pt-8">
        <div>
          <p className="font-serif text-5xl leading-none tracking-[-0.02em] tabular-nums sm:text-6xl" aria-live="polite">
            {count}
            <span className="ml-2 align-middle font-sans text-sm tracking-normal text-zinc-500 dark:text-zinc-400">
              of {DESKS} desks lit
            </span>
          </p>
          <p className="mt-3 max-w-sm text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
            Lantern Hall stays open until four. Every window up there is a member working tonight.
          </p>
        </div>
        <button
          type="button"
          aria-pressed={joined}
          onClick={() => setJoined((j) => !j)}
          className="inline-flex h-10 items-center gap-2 rounded-full bg-zinc-950 px-5 text-sm font-medium text-[#fafaf9] transition-[background-color,scale] duration-150 hover:bg-zinc-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 active:scale-[0.97] aria-pressed:bg-[#ffb020] aria-pressed:text-zinc-950 dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-white dark:focus-visible:outline-zinc-100 dark:aria-pressed:bg-[#ffd27a]"
        >
          <span
            aria-hidden
            className="size-2 rounded-[1px] bg-current opacity-40 transition-opacity duration-150 [[aria-pressed=true]_&]:opacity-100"
          />
          {joined ? "You're at a desk" : "Take a desk"}
        </button>
      </div>
      <Skyline
        seed={21}
        lights={count / DESKS}
        sun={false}
        className="mt-6 h-64 text-zinc-950 [--skyline-light:#ffbf3f] [--skyline-tint:#c3cdff] sm:h-72 dark:text-[#1b1f2e] dark:[--skyline-light:#ffd27a] dark:[--skyline-tint:#202c78]"
      />
    </div>
  );
}