Margin Note: Weekly Signups

"use client";

import * as React from "react";

import { MarginNote, type MarginNoteNote } from "@/components/ui/margin-note";

const WEEKS = [
  "Jul 7", "Jul 14", "Jul 21", "Jul 28", "Aug 4", "Aug 11", "Aug 18", "Aug 25",
  "Sep 1", "Sep 8", "Sep 15", "Sep 22", "Sep 29", "Oct 6", "Oct 13", "Oct 20",
];
const SIGNUPS = [612, 640, 655, 1720, 1180, 905, 880, 862, 498, 870, 892, 1150, 1205, 1238, 1262, 1290];

const NOTES: MarginNoteNote[] = [
  { at: 3, title: "Launch week", body: "1,720 signups, 2.6× a normal week.", delta: "+163%" },
  { at: 8, title: "Login outage", body: "Sign-in was down for six hours on Tuesday.", delta: "−42%" },
  { at: 11, to: 14, title: "Free plan, three seats", body: "Signups held 38% higher for four weeks.", delta: "+38%" },
];

export function MarginNoteDemo() {
  const [run, setRun] = React.useState(0);
  return (
    <div className="w-full max-w-3xl rounded-2xl bg-white p-5 text-zinc-900 shadow-sm ring-1 ring-zinc-950/[0.08] sm:p-7 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-white/10">
      <div className="mb-5 flex items-start justify-between gap-4">
        <div>
          <p className="text-xs font-medium text-zinc-500 dark:text-zinc-400">Kiln · Weekly signups</p>
          <p className="mt-1 flex items-baseline gap-2">
            <span className="text-2xl font-semibold tracking-tight tabular-nums">15,859</span>
            <span className="text-xs text-zinc-500 dark:text-zinc-400">last 16 weeks</span>
          </p>
        </div>
        <button
          type="button"
          onClick={() => setRun((r) => r + 1)}
          className="inline-flex h-8 items-center gap-1.5 rounded-full px-3 text-xs font-medium text-zinc-600 ring-1 ring-zinc-950/10 transition-colors hover:bg-zinc-50 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 dark:text-zinc-300 dark:ring-white/15 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:outline-white"
        >
          <svg viewBox="0 0 16 16" className="size-3.5" fill="none" stroke="currentColor" strokeWidth={1.6} aria-hidden>
            <path d="M2.75 8a5.25 5.25 0 1 0 1.6-3.77M2.75 2.75v2.5h2.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          Read again
        </button>
      </div>
      <MarginNote
        key={run}
        label="Kiln weekly signups"
        data={SIGNUPS}
        labels={WEEKS}
        notes={NOTES}
        summary="Signups are up 38% since the free plan went to three seats."
        format={(value) => value.toLocaleString("en-US")}
      />
    </div>
  );
}