Timeline

"use client";
import * as React from "react";
import { StatusGlyph } from "@/components/ui/notchset/status-glyph";
import { Timeline } from "@/components/ui/notchset/blocks/timeline";

const START = [
  { id: "RP-49", group: "beta", title: "Recalculate ETA when a job runs long", start: -6, end: -1, started: true, late: true },
  { id: "RP-57", group: "beta", title: "Undo for route edits", start: -3, end: 0, started: true },
  { id: "RP-60", group: "launch", title: "Explain why a stop moved", start: 4, end: 7 },
];

export default function TimelineDemo() {
  const [rows, setRows] = React.useState(START);
  const [open, setOpen] = React.useState<string | null>(null);
  return (
    <div className="flex w-full flex-col gap-2">
      <Timeline
        label="Route planner v2: open work by milestone"
        groups={[
          { key: "beta", label: "Planner beta", due: { day: 10, label: "Oct 30" } },
          { key: "launch", label: "Public launch" },
        ]}
        rows={rows.map((r) => ({ ...r, glyph: <StatusGlyph status={r.started ? "doing" : "todo"} label={r.title} /> }))}
        from={-10}
        to={20}
        ticks={[-8, -1, 6, 13, 20].map((day) => ({ day, label: `Day ${day}` }))}
        dayName={(d) => (d === 0 ? "today" : d < 0 ? `${-d} days ago` : `in ${d} days`)}
        onOpen={setOpen}
        onMove={(id, by) => setRows((rs) => rs.map((r) => (r.id === id ? { ...r, end: r.end + by, start: r.started ? r.start : r.start + by } : r)))}
      />
      {open && <p className="m-0 px-[var(--ns-gutter)] text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">Opened {open}</p>}
    </div>
  );
}