import * as React from "react"import {  Kanban,  KanbanBoard,  KanbanColumn,  KanbanColumnHandle,  KanbanItem,  KanbanItemHandle,  KanbanOverlay,} from "@/components/ui/kanban"type Task = {  id: string  title: string  detail: string}export default function KanbanDemo() {  const [columns, setColumns] = React.useState<Record<string, Task[]>>({    backlog: [      { id: "research", title: "Review user feedback", detail: "Collect notes from the latest interviews." },      { id: "copy", title: "Write release notes", detail: "Summarize the improvements for customers." },    ],    progress: [      { id: "api", title: "Implement API", detail: "Add pagination to the projects endpoint." },      { id: "tests", title: "Add checkout tests", detail: "Cover the successful payment flow." },    ],    done: [{ id: "onboarding", title: "Design onboarding", detail: "Finalize the first-run experience." }],  })  return (    <Kanban      value={columns}      getItemValue={(item) => item.id}      onValueChange={setColumns}    >      <KanbanBoard className="h-[360px] w-full max-w-2xl items-stretch">        {Object.entries(columns).map(([columnId, items]) => (          <KanbanColumn            key={columnId}            value={columnId}            asHandle            className="min-w-0 flex-1"          >            <KanbanColumnHandle className="px-1 py-1 text-left text-sm font-medium capitalize">              {columnId === "progress" ? "In progress" : columnId}            </KanbanColumnHandle>            <div className="flex flex-col gap-2">              {items.map((item) => (                <KanbanItem key={item.id} value={item.id} asHandle>                  <KanbanItemHandle className="flex w-full flex-col items-start gap-1 rounded-md border bg-background p-3 text-left shadow-sm">                    <span className="text-sm font-medium">{item.title}</span>                    <span className="text-xs text-muted-foreground">{item.detail}</span>                  </KanbanItemHandle>                </KanbanItem>              ))}            </div>          </KanbanColumn>        ))}      </KanbanBoard>      <KanbanOverlay>        {({ value }) => (          <div className="rounded-md border bg-background px-3 py-2 text-sm shadow-lg">            {String(value)}          </div>        )}      </KanbanOverlay>    </Kanban>  )}