Task detail

"use client";
import * as React from "react";
import { CalendarDays, Tag } from "lucide-react";
import { PriorityMark } from "@/components/ui/notchset/priority-mark";
import { PropertyPill } from "@/components/ui/notchset/property-pill";
import { StatusGlyph } from "@/components/ui/notchset/status-glyph";
import { ReplyComposer } from "@/components/ui/notchset/blocks/reply-composer";
import { TaskDetail } from "@/components/ui/notchset/blocks/task-detail";

const PEOPLE = [
  { id: "hana", name: "Hana Moriyama", hint: "QA engineer" },
  { id: "tomas", name: "Tomás Ferreira", hint: "Backend engineer" },
];

export default function TaskDetailDemo() {
  const [title, setTitle] = React.useState("Recalculate ETA when a job runs long");
  const [desc, setDesc] = React.useState("When a job runs past its estimate, every later stop's ETA should move.");
  const [subs, setSubs] = React.useState([
    { title: "Listen for job-overrun events", done: true },
    { title: "Send the 'running late' text once per stop", done: false },
  ]);
  const [more, setMore] = React.useState(false);
  const [late, setLate] = React.useState(true);
  const [tab, setTab] = React.useState("comments");
  const [draft, setDraft] = React.useState("");
  const [thread, setThread] = React.useState(["Tested with a 40-stop route: ETAs move."]);
  return (
    <div className="w-full max-w-[600px]">
      <TaskDetail
        title={title}
        onTitleChange={(t) => (t ? setTitle(t) : undefined)}
        banner={late ? { tone: "bad", icon: <CalendarDays />, title: "Overdue", detail: "by 1 day", action: { label: "Move to tomorrow", onClick: () => setLate(false) } } : undefined}
        properties={
          <>
            <PropertyPill kind="Status" icon={<StatusGlyph status="review" label={title} />}>In review</PropertyPill>
            <PropertyPill kind="Due" tone={late ? "bad" : undefined} icon={<CalendarDays />}>{late ? "Yesterday" : "Tomorrow"}</PropertyPill>
            <PropertyPill kind="Priority" icon={<PriorityMark priority={3} />}>High</PropertyPill>
            <PropertyPill kind="Labels" icon={<Tag />}>Backend</PropertyPill>
          </>
        }
        details={{ open: more, onToggle: () => setMore(!more), items: [{ label: "Project", value: "Route planner v2" }, { label: "Started", value: "Wed, Oct 14" }] }}
        description={desc}
        onDescriptionChange={setDesc}
        checklist={{ items: subs, onToggle: (i) => setSubs((s) => s.map((x, k) => (k === i ? { ...x, done: !x.done } : x))) }}
        thread={{
          tabs: [{ value: "comments", label: "Comments", count: thread.length }, { value: "activity", label: "Activity" }],
          value: tab,
          onChange: setTab,
          body: tab === "comments" ? <ul className="m-0 flex list-none flex-col gap-2 p-0">{thread.map((c, i) => <li key={i}>{c}</li>)}</ul> : <p className="m-0 text-[var(--ns-ink-3)]">Hana sent it for review yesterday.</p>,
          composer: (
            <ReplyComposer
              mode="comment"
              mentions={PEOPLE}
              value={draft}
              onValueChange={setDraft}
              onSend={() => {
                setThread((t) => [...t, draft]);
                setDraft("");
              }}
              onDiscard={() => setDraft("")}
              placeholder="Leave a comment… @ to mention"
              canSend={!!draft.trim()}
            />
          ),
        }}
      />
    </div>
  );
}