Task row

"use client";
import * as React from "react";
import { MessageSquare } from "lucide-react";
import { TaskMark, TaskRow } from "@/components/ui/notchset/blocks/task-row";
import type { TaskStatus } from "@/components/ui/notchset/status-glyph";

const TASKS = [
  { id: "RP-49", title: "Recalculate ETA when a job runs long", status: "review" as TaskStatus, due: "Yesterday", late: true, comments: 4 },
  { id: "RP-57", title: "Undo for route edits", status: "doing" as TaskStatus, due: "Today", late: false, comments: 0 },
  { id: "RP-60", title: "Explain why a stop moved", status: "todo" as TaskStatus, due: "Oct 27", late: false, comments: 1 },
];

export default function TaskRowDemo() {
  const [tasks, setTasks] = React.useState(TASKS);
  const [sel, setSel] = React.useState<string[]>([]);
  const [open, setOpen] = React.useState<string | null>(null);
  return (
    <div className="w-full max-w-[720px]">
      {tasks.map((t) => (
        <TaskRow
          key={t.id}
          id={t.id}
          code={t.id}
          title={t.title}
          status={t.status}
          due={t.status === "done" ? "Done today" : t.due}
          late={t.late && t.status !== "done"}
          meta={t.comments ? <TaskMark icon={<MessageSquare aria-hidden />}>{t.comments}</TaskMark> : undefined}
          context={<span className="truncate">Route planner v2</span>}
          active={open === t.id}
          selected={sel.includes(t.id)}
          onSelect={() => setSel((s) => (s.includes(t.id) ? s.filter((x) => x !== t.id) : [...s, t.id]))}
          onOpen={() => setOpen(t.id)}
          onComplete={() => setTasks((ts) => ts.map((x) => (x.id === t.id ? { ...x, status: "done" } : x)))}
        />
      ))}
      <p className="m-0 px-[var(--ns-gutter)] pt-2 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">{open ? `Opened ${open}` : sel.length ? `${sel.length} selected` : "Tick a glyph to finish a task"}</p>
    </div>
  );
}