50: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"] 51: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"] 52:T23cc,'use client'; import { useState } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Calendar, GripVertical, MessageCircle, Paperclip, Plus } from 'lucide-react'; interface Task { id: string title: string description?: string priority?: "low" | "medium" | "high" assignee?: { name: string avatar: string } tags?: string[] dueDate?: string attachments?: number comments?: number } interface Column { id: string title: string tasks: Task[] color?: string } const sampleData: Column[] = [ { id: "todo", title: "To Do", color: "#8B7355", tasks: [ { id: "1", title: "Design System Audit", description: "Review and update component library", priority: "high", assignee: { name: "Sarah Chen", avatar: "/avatars/people/02.jpg" }, tags: ["Design", "System"], dueDate: "2024-01-15", attachments: 3, comments: 7, }, { id: "2", title: "User Research Analysis", description: "Analyze feedback from recent user interviews", priority: "medium", assignee: { name: "Alex Rivera", avatar: "/avatars/people/04.jpg" }, tags: ["Research", "UX"], dueDate: "2024-01-18", comments: 4, }, ], }, { id: "progress", title: "In Progress", color: "#6B8E23", tasks: [ { id: "3", title: "Mobile App Redesign", description: "Implementing new navigation patterns", priority: "high", assignee: { name: "Jordan Kim", avatar: "/avatars/people/06.jpg" }, tags: ["Mobile", "UI"], attachments: 8, comments: 12, }, ], }, { id: "review", title: "Review", color: "#CD853F", tasks: [ { id: "4", title: "API Documentation", description: "Complete developer documentation", priority: "medium", assignee: { name: "Maya Patel", avatar: "/avatars/people/09.jpg" }, tags: ["Documentation", "API"], dueDate: "2024-01-20", comments: 2, }, ], }, { id: "done", title: "Done", color: "#556B2F", tasks: [ { id: "5", title: "Landing Page Optimization", description: "Improved conversion rate by 23%", priority: "low", assignee: { name: "Chris Wong", avatar: "/avatars/people/10.jpg" }, tags: ["Marketing", "Web"], attachments: 2, comments: 8, }, ], }, ] export default function KanbanBoard() { const [columns, setColumns] = useState(sampleData); const handleDragStart = (e: React.DragEvent, task: Task, columnId: string) => { e.dataTransfer.setData('text/plain', JSON.stringify({ task, sourceColumnId: columnId })); }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); }; const handleDrop = (e: React.DragEvent, targetColumnId: string) => { e.preventDefault(); const data = JSON.parse(e.dataTransfer.getData('text/plain')); const { task, sourceColumnId } = data; if (sourceColumnId === targetColumnId) return; setColumns((prev) => prev.map((col) => { if (col.id === sourceColumnId) { return { ...col, tasks: col.tasks.filter((t) => t.id !== task.id) }; } if (col.id === targetColumnId) { return { ...col, tasks: [...col.tasks, task] }; } return col; }), ); }; return (

Kanban Board

Drag and drop task management

{columns.map((column) => (

handleDrop(e, column.id)} >

{column.title}

{column.tasks.length}

{column.tasks.map((task) => ( handleDragStart(e, task, column.id)} >

{task.title}

{task.description && (

{task.description}

)} {task.tags && (

{task.tags.map((tag) => ( {tag} ))}

)}

{task.dueDate && (

Jan 15

)} {task.comments && (

{task.comments}

)} {task.attachments && (

{task.attachments}

)}

{task.assignee && ( {task.assignee.name .split(' ') .map((n) => n[0]) .join('')} )}

))}

); } 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","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":"next-themes"}]]}]}],["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","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":"framer-motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["card","button","select","input","label","textarea"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app/registry/kanban/kanbanboard.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/kanbanboard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]