4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2a3d,"use client" import * as React from "react" import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCorners, useDroppable, useSensor, useSensors, type DragEndEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core" import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { cn } from "@/lib/utils" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { IconPlaceholder } from "@/components/icons/icon-placeholder" type Label = "Design" | "Engineering" | "Marketing" | "Ops" const labelVariant: Record = { Design: "secondary", Engineering: "default", Marketing: "outline", Ops: "outline", } type Task = { id: string title: string label: Label assignee: string initials: string avatarSrc: string } type Column = { id: string; title: string; tasks: Task[] } const initialColumns: Column[] = [ { id: "todo", title: "To Do", tasks: [ { id: "k1", title: "Draft Q3 launch announcement", label: "Marketing", assignee: "Ravi Patel", initials: "RP", avatarSrc: "https://i.pravatar.cc/32?img=15", }, { id: "k2", title: "Design empty states for reports", label: "Design", assignee: "Mia Cho", initials: "MC", avatarSrc: "https://i.pravatar.cc/32?img=47", }, { id: "k3", title: "Set up staging environment", label: "Ops", assignee: "Leo Fenn", initials: "LF", avatarSrc: "https://i.pravatar.cc/32?img=51", }, ], }, { id: "in-progress", title: "In Progress", tasks: [ { id: "k4", title: "Build billing usage endpoint", label: "Engineering", assignee: "Dana Wu", initials: "DW", avatarSrc: "https://i.pravatar.cc/32?img=32", }, { id: "k5", title: "Rework onboarding checklist", label: "Design", assignee: "Mia Cho", initials: "MC", avatarSrc: "https://i.pravatar.cc/32?img=47", }, ], }, { id: "review", title: "Review", tasks: [ { id: "k6", title: "Audit tracking events", label: "Marketing", assignee: "Ravi Patel", initials: "RP", avatarSrc: "https://i.pravatar.cc/32?img=15", }, ], }, { id: "done", title: "Done", tasks: [ { id: "k7", title: "Migrate assets to CDN", label: "Ops", assignee: "Leo Fenn", initials: "LF", avatarSrc: "https://i.pravatar.cc/32?img=51", }, { id: "k8", title: "Ship dark-mode tokens", label: "Engineering", assignee: "Dana Wu", initials: "DW", avatarSrc: "https://i.pravatar.cc/32?img=32", }, ], }, ] function TaskCardBody({ task, dragging }: { task: Task; dragging?: boolean }) { return (

{task.title}

{task.label} {task.initials}

) } function SortableTaskCard({ task }: { task: Task }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: task.id }) return (

) } function BoardColumn({ column, reflowKey, }: { column: Column reflowKey: number }) { const { setNodeRef, isOver } = useDroppable({ id: column.id }) return (

{column.title} {column.tasks.length}

t.id)} strategy={verticalListSortingStrategy} >

{column.tasks.map((task) => ( ))} {column.tasks.length === 0 && (

Drop here

)}

) } export default function KanbanBlock() { const [columns, setColumns] = React.useState(initialColumns) const [activeTask, setActiveTask] = React.useState(null) const [reflow, setReflow] = React.useState(0) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) ) const findColumnId = React.useCallback( (id: string) => columns.some((c) => c.id === id) ? id : columns.find((c) => c.tasks.some((t) => t.id === id))?.id, [columns] ) function handleDragStart(event: DragStartEvent) { const id = String(event.active.id) setActiveTask( columns.flatMap((c) => c.tasks).find((t) => t.id === id) ?? null ) } function handleDragOver(event: DragOverEvent) { const { active, over } = event if (!over) return const activeId = String(active.id) const overId = String(over.id) const activeCol = findColumnId(activeId) const overCol = findColumnId(overId) if (!activeCol || !overCol || activeCol === overCol) return setColumns((prev) => { const from = prev.find((c) => c.id === activeCol)! const moving = from.tasks.find((t) => t.id === activeId) if (!moving) return prev const to = prev.find((c) => c.id === overCol)! const overIndex = to.tasks.findIndex((t) => t.id === overId) const insertAt = overIndex >= 0 ? overIndex : to.tasks.length return prev.map((c) => { if (c.id === activeCol) return { ...c, tasks: c.tasks.filter((t) => t.id !== activeId) } if (c.id === overCol) { const next = [...c.tasks] next.splice(insertAt, 0, moving) return { ...c, tasks: next } } return c }) }) } function handleDragEnd(event: DragEndEvent) { const { active, over } = event setActiveTask(null) setReflow((n) => n + 1) if (!over) return const activeId = String(active.id) const overId = String(over.id) const col = findColumnId(activeId) if (!col || col !== findColumnId(overId)) return setColumns((prev) => prev.map((c) => { if (c.id !== col) return c const oldIndex = c.tasks.findIndex((t) => t.id === activeId) const newIndex = c.tasks.findIndex((t) => t.id === overId) if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) return c return { ...c, tasks: arrayMove(c.tasks, oldIndex, newIndex) } }) ) } return (

Acme Workspace

Project Board

{ setActiveTask(null) setReflow((n) => n + 1) }} >

{columns.map((col) => ( ))}

{activeTask ? (

) : null}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/sortable",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/sortable"}]]}]}],["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities"}]]}]}],["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@7ovr","registryDependencies":["avatar","badge","card","scroll-area"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/kanban/3/kanban-block.tsx","content":"$50","type":"registry:component","target":"components/blocks/kanban-3.tsx"}],"className":"h-[70svh] min-h-80"}]]}]