Status glyph

"use client";
import * as React from "react";
import { StatusGlyph, type TaskStatus } from "@/components/ui/notchset/status-glyph";

export default function StatusGlyphDemo() {
  const [status, setStatus] = React.useState<TaskStatus>("doing");
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-5 text-[length:var(--ns-text-small)] text-[var(--ns-ink-2)]">
        {(["backlog", "todo", "doing", "review", "done", "cancelled"] as TaskStatus[]).map((s) => (
          <span key={s} className="flex items-center gap-2">
            <StatusGlyph status={s} label="Snap stops to the road network" />
            {{ backlog: "Backlog", todo: "To do", doing: "In progress", review: "In review", done: "Done", cancelled: "Cancelled" }[s]}
          </span>
        ))}
      </div>
      <span className="flex items-center gap-2.5">
        <StatusGlyph status={status} label="Ship the route summary bar" onComplete={() => setStatus("done")} />
        <span className={status === "done" ? "text-[var(--ns-ink-3)] line-through" : undefined}>Ship the route summary bar</span>
        {status === "done" && (
          <button type="button" className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)] underline" onClick={() => setStatus("doing")}>
            Reopen
          </button>
        )}
      </span>
    </div>
  );
}