Now card

"use client";
import * as React from "react";
import { NowCard } from "@/components/ui/notchset/blocks/now-card";

const PLAN = [
  { id: "RP-59", title: "Write the v1 to v2 migration plan", status: "todo" as const, why: "3 days late", late: true },
  { id: "RP-57", title: "Undo for route edits", status: "doing" as const, why: "Due today", late: false },
];

export default function NowCardDemo() {
  const [i, setI] = React.useState(0);
  const [finishing, setFinishing] = React.useState(false);
  const [opened, setOpened] = React.useState<string | null>(null);
  const t = PLAN[i];
  return (
    <div className="flex w-full max-w-[560px] flex-col gap-2">
      <NowCard
        task={t ? { id: t.id, title: t.title, status: t.status } : null}
        why={t?.why ?? ""}
        late={t?.late}
        finishing={finishing}
        context={<span className="text-[var(--ns-ink-3)]">Route planner v2 · {t?.id}</span>}
        onDone={() => {
          setFinishing(true);
          setTimeout(() => {
            setFinishing(false);
            setI((x) => x + 1);
          }, 650);
        }}
        onOpen={() => setOpened(t?.title ?? null)}
        onLater={() => setI((x) => (x + 1) % PLAN.length)}
      />
      {opened && <p className="m-0 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">Opened “{opened}”</p>}
    </div>
  );
}