Margin Note: Incident Read

"use client";

import * as React from "react";

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

const HOURS = Array.from({ length: 24 }, (_, h) => `${String(h).padStart(2, "0")}:00`);
const P95 = [182, 176, 171, 169, 172, 180, 196, 214, 229, 238, 231, 224, 219, 221, 842, 516, 207, 199, 194, 190, 188, 185, 183, 181];

const NOTES: MarginNoteNote[] = [
  { at: 9, title: "Morning peak", body: "EU traffic tops out; p95 stays under 240 ms.", delta: "238 ms" },
  { at: 14, title: "Deploy 4812", body: "An N+1 query in /orders sent p95 to 842 ms.", delta: "+281%" },
  { at: 15, to: 16, title: "Rolled back to 4811", body: "Under 210 ms again by 16:00.", delta: "−75%" },
];

export function MarginNoteLatencyDemo() {
  const [run, setRun] = React.useState(0);
  return (
    <div className="w-full max-w-3xl overflow-hidden rounded-2xl bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-950/[0.08] dark:bg-zinc-950 dark:text-zinc-100 dark:ring-white/10">
      <div className="flex items-center justify-between gap-3 border-b border-zinc-950/[0.06] px-5 py-3 dark:border-white/[0.08]">
        <div className="flex min-w-0 items-center gap-2.5">
          <span className="size-2 shrink-0 rounded-full bg-emerald-500" />
          <p className="truncate font-mono text-xs text-zinc-600 dark:text-zinc-400">
            api.harbor.dev <span className="text-zinc-400 dark:text-zinc-600">/</span> p95 latency{" "}
            <span className="text-zinc-400 dark:text-zinc-600">/</span> today
          </p>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <span className="hidden rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-700 sm:inline dark:text-emerald-400">
            Resolved 16:04
          </span>
          <button
            type="button"
            onClick={() => setRun((r) => r + 1)}
            className="rounded-md px-2 py-1 font-mono text-[11px] text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-zinc-950 dark:hover:bg-white/10 dark:hover:text-white dark:focus-visible:outline-white"
          >
            replay
          </button>
        </div>
      </div>
      <div className="p-5 sm:p-6">
        <MarginNote
          key={run}
          label="p95 latency for api.harbor.dev today"
          data={P95}
          labels={HOURS}
          notes={NOTES}
          summary="One deploy cost two slow hours at checkout. Rolling it back fixed it."
          format={(value) => `${Math.round(value)} ms`}
          className="[--margin-note-accent:#e11d48] dark:[--margin-note-accent:#fb7185]"
        />
      </div>
    </div>
  );
}