Countdown

"use client";

import { useEffect, useState, type ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-countdown-width) max-w-full flex-col gap-(--tui-countdown-gap) rounded-(--tui-countdown-radius) bg-(--tui-countdown-bg) p-(--tui-countdown-padding) font-(family-name:--tui-font) text-(length:--tui-countdown-font-size) leading-none text-(--tui-countdown-fg) shadow-(--tui-countdown-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-countdown-muted)",
  chip: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-(--tui-countdown-well) px-1.5 text-[0.8em] font-medium text-(--tui-countdown-muted) tabular-nums",
  well: "rounded-[calc(var(--tui-countdown-radius)_-_var(--tui-countdown-padding))] bg-(--tui-countdown-well)",
};

const UNITS = [
  ["days", 86_400],
  ["hours", 3_600],
  ["minutes", 60],
  ["seconds", 1],
] as const;

type Unit = (typeof UNITS)[number][0];

export interface CountdownProps {
  /** The moment being counted down to. */
  to: Date | string | number;
  /** A quiet label over the tiles: what is coming. */
  label?: ReactNode;
  /** A small word at the end of the label, such as the day it happens. */
  when?: ReactNode;
  /** What each tile is called. */
  labels?: Partial<Record<Unit, string>>;
  /** Leave the days off, for something less than a day away. */
  hideDays?: boolean;
  /** Called once, when it reaches nothing. */
  onDone?: () => void;
  className?: string;
}

/**
 * The time left until a moment, a tile to each unit, in one floating panel.
 * Each figure is two digits that change on their own: the one that changed
 * drops in and the other holds still. It reads the clock only in the
 * browser, so the server and the first paint agree on empty tiles.
 */
export function Countdown({ to, label, when, labels, hideDays, onDone, className }: CountdownProps) {
  const target = new Date(to).getTime();
  const [left, setLeft] = useState<number | null>(null);

  useEffect(() => {
    let timer = 0;
    const tick = () => {
      const seconds = Math.max(0, Math.floor((target - Date.now()) / 1000));
      setLeft(seconds);
      if (seconds === 0) {
        window.clearInterval(timer);
        onDone?.();
      }
    };
    tick();
    timer = window.setInterval(tick, 1000);
    return () => window.clearInterval(timer);
    // onDone is read when the count ends, not watched.
  }, [target]);

  let rest = left ?? 0;
  const units = UNITS.filter(([unit]) => !(hideDays && unit === "days")).map(([unit, size]) => {
    const amount = Math.floor(rest / size);
    rest -= amount * size;
    return [unit, amount] as const;
  });

  return (
    <div role="timer" data-slot="countdown" className={[air.panel, className].filter(Boolean).join(" ")}>
      {(label || when) && (
        <div className={air.head}>
          {label}
          {when && <span className={air.chip}>{when}</span>}
        </div>
      )}
      <div className="grid gap-(--tui-countdown-gap)" style={{ gridTemplateColumns: "repeat(" + units.length + ", minmax(0, 1fr))" }}>
        {units.map(([unit, amount]) => (
          <div key={unit} data-slot="countdown-tile" className={"flex flex-col items-center gap-2.5 px-2 py-(--tui-countdown-tile-padding) " + air.well}>
            <span data-slot="countdown-number" aria-label={left === null ? undefined : String(amount)} className="flex overflow-hidden text-(length:--tui-countdown-number-size) leading-none font-semibold tracking-[-0.03em] tabular-nums">
              {(left === null ? "--" : String(amount).padStart(2, "0")).split("").map((digit, place) => (
                // Keyed by the digit itself, so only a digit that changed is put in afresh and plays its arrival.
                <span key={place + "-" + digit} aria-hidden className={left === null ? "opacity-30" : "[animation:tui-air-roll_0.36s_cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:[animation:none]"}>
                  {digit}
                </span>
              ))}
            </span>
            <span className="text-[0.93em] text-(--tui-countdown-muted)">{labels?.[unit] ?? unit}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Countdown */
  --tui-countdown-width: 360px;
  --tui-countdown-padding: calc(var(--tui-space) * 2);
  --tui-countdown-gap: calc(var(--tui-space) * 1.5);
  --tui-countdown-radius: calc(var(--tui-radius) * 3.25);
  --tui-countdown-font-size: var(--tui-text);
  --tui-countdown-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-countdown-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-countdown-fg: var(--tui-fg);
  --tui-countdown-muted: var(--tui-muted-fg);
  --tui-countdown-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-countdown-tile-padding: calc(var(--tui-space) * 4.5);
  --tui-countdown-number-size: 30px;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}

@keyframes tui-air-roll {
  from { opacity: 0; transform: translateY(-40%); }
  to { opacity: 1; transform: none; }
}