src/components/docs/HourBar.tsx

import clsx from "clsx";

export interface HourBarProps {
  /** 0..1 portion of the track to fill */
  share: number;
  /** accent = primary leaderboard data · accent-soft = secondary live data · muted = everything else */
  tone?: "muted" | "accent" | "accent-soft";
  className?: string;
}

const tones: Record<NonNullable<HourBarProps["tone"]>, string> = {
  /* token-derived teal-tinted fill so even "everything else" bars carry
     a quiet phosphor cast instead of grey-on-grey */
  muted: "bg-[color-mix(in_srgb,var(--accent)_18%,var(--muted)_50%)]",
  accent: "bg-accent/75",
  "accent-soft": "bg-accent/40",
};

/**
 * Proportional hour bar. Purely decorative — always pair with the printed
 * number; the bar itself is aria-hidden.
 */
export default function HourBar({
  share,
  tone = "muted",
  className,
}: HourBarProps) {
  const clamped = Math.max(0, Math.min(1, share));
  return (
    <div
      aria-hidden
      className={clsx(
        "hairline h-2 w-full overflow-hidden rounded-sm bg-surface-2",
        className,
      )}
    >
      <div
        className={clsx("h-full", tones[tone])}
        style={{ width: `${clamped * 100}%` }}
      />
    </div>
  );
}