Snip/src/components/BarChart.tsx

import { useState } from "react";
import type { DayCount } from "../lib/types";
import { weekdayLabel } from "../lib/format";

interface Props {
  data: DayCount[];
  height?: number;
}

// ponytail: no grow-in animation — this renders on every dashboard page view,
// and motion seen tens of times a day just reads as lag.
export function BarChart({ data, height = 84 }: Props) {
  const [hover, setHover] = useState<number | null>(null);
  const max = Math.max(1, ...data.map((d) => d.count));

  return (
    <div className="flex items-end gap-1.5" style={{ height }}>
      {data.map((d, i) => {
        const ratio = d.count / max;
        const active = hover === i;
        return (
          <div
            key={d.date}
            className="relative flex h-full flex-1 flex-col items-center justify-end gap-1.5"
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(null)}
          >
            {active && (
              <div className="pointer-events-none absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded-md bg-[var(--ink)] px-2 py-1 text-[11px] font-medium tabular-nums text-[var(--bg)]">
                {d.count} {d.count === 1 ? "click" : "clicks"}
              </div>
            )}
            <div className="flex w-full flex-1 items-end">
              <div
                className={`w-full rounded-[3px] ${active ? "bg-[var(--ink)]" : "bg-[var(--ring)]"}`}
                style={{ height: `${Math.max(ratio * 100, 4)}%`, minHeight: 3 }}
              />
            </div>
            <span className="text-[10px] text-muted">{weekdayLabel(d.date)}</span>
          </div>
        );
      })}
    </div>
  );
}