{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kanbanboard",
  "title": "Kanban Board",
  "description": "component for the Kanban Board",
  "dependencies": [
    "lucide-react",
    "next-themes",
    "framer-motion"
  ],
  "registryDependencies": [
    "card",
    "button",
    "select",
    "input",
    "label",
    "textarea"
  ],
  "files": [
    {
      "path": "app/registry/kanban/kanbanboard.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Badge } from '@/components/ui/badge';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Calendar, GripVertical, MessageCircle, Paperclip, Plus } from 'lucide-react';\n\n\n\n\ninterface Task {\n  id: string\n  title: string\n  description?: string\n  priority?: \"low\" | \"medium\" | \"high\"\n  assignee?: {\n    name: string\n    avatar: string\n  }\n  tags?: string[]\n  dueDate?: string\n  attachments?: number\n  comments?: number\n}\n\n interface Column {\n  id: string\n  title: string\n  tasks: Task[]\n  color?: string\n}\n\nconst sampleData: Column[] = [\n  {\n    id: \"todo\",\n    title: \"To Do\",\n    color: \"#8B7355\",\n    tasks: [\n      {\n        id: \"1\",\n        title: \"Design System Audit\",\n        description: \"Review and update component library\",\n        priority: \"high\",\n        assignee: { name: \"Sarah Chen\", avatar: \"/headshot/Lummi Doodle 02.png\" },\n        tags: [\"Design\", \"System\"],\n        dueDate: \"2024-01-15\",\n        attachments: 3,\n        comments: 7,\n      },\n      {\n        id: \"2\",\n        title: \"User Research Analysis\",\n        description: \"Analyze feedback from recent user interviews\",\n        priority: \"medium\",\n        assignee: { name: \"Alex Rivera\", avatar: \"/headshot/Lummi Doodle 04.png\" },\n        tags: [\"Research\", \"UX\"],\n        dueDate: \"2024-01-18\",\n        comments: 4,\n      },\n    ],\n  },\n  {\n    id: \"progress\",\n    title: \"In Progress\",\n    color: \"#6B8E23\",\n    tasks: [\n      {\n        id: \"3\",\n        title: \"Mobile App Redesign\",\n        description: \"Implementing new navigation patterns\",\n        priority: \"high\",\n        assignee: { name: \"Jordan Kim\", avatar: \"/headshot/Lummi Doodle 06.png\" },\n        tags: [\"Mobile\", \"UI\"],\n        attachments: 8,\n        comments: 12,\n      },\n    ],\n  },\n  {\n    id: \"review\",\n    title: \"Review\",\n    color: \"#CD853F\",\n    tasks: [\n      {\n        id: \"4\",\n        title: \"API Documentation\",\n        description: \"Complete developer documentation\",\n        priority: \"medium\",\n        assignee: { name: \"Maya Patel\", avatar: \"/headshot/Lummi Doodle 09.png\" },\n        tags: [\"Documentation\", \"API\"],\n        dueDate: \"2024-01-20\",\n        comments: 2,\n      },\n    ],\n  },\n  {\n    id: \"done\",\n    title: \"Done\",\n    color: \"#556B2F\",\n    tasks: [\n      {\n        id: \"5\",\n        title: \"Landing Page Optimization\",\n        description: \"Improved conversion rate by 23%\",\n        priority: \"low\",\n        assignee: { name: \"Chris Wong\", avatar: \"/headshot/Lummi Doodle 10.png\" },\n        tags: [\"Marketing\", \"Web\"],\n        attachments: 2,\n        comments: 8,\n      },\n    ],\n  },\n]\n\n\n\nexport default function KanbanBoard() {\n  const [columns, setColumns] = useState<Column[]>(sampleData);\n\n  const handleDragStart = (e: React.DragEvent, task: Task, columnId: string) => {\n    e.dataTransfer.setData('text/plain', JSON.stringify({ task, sourceColumnId: columnId }));\n  };\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault();\n  };\n\n  const handleDrop = (e: React.DragEvent, targetColumnId: string) => {\n    e.preventDefault();\n    const data = JSON.parse(e.dataTransfer.getData('text/plain'));\n    const { task, sourceColumnId } = data;\n\n    if (sourceColumnId === targetColumnId) return;\n\n    setColumns((prev) =>\n      prev.map((col) => {\n        if (col.id === sourceColumnId) {\n          return { ...col, tasks: col.tasks.filter((t) => t.id !== task.id) };\n        }\n        if (col.id === targetColumnId) {\n          return { ...col, tasks: [...col.tasks, task] };\n        }\n        return col;\n      }),\n    );\n  };\n\n  return (\n    <div className=\"\">\n      <div className=\"mb-8 text-center\">\n        <h1 className=\"text-4xl font-light text-neutral-900 dark:text-neutral-100 mb-2\">\n          Kanban Board\n        </h1>\n        <p className=\"text-neutral-700 dark:text-neutral-300\">Drag and drop task management</p>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2  gap-6\">\n        {columns.map((column) => (\n          <div\n            key={column.id}\n            className=\"bg-white/20 dark:bg-neutral-900/20 backdrop-blur-xl rounded-3xl p-5 border border-border dark:border-neutral-700/50\"\n            onDragOver={handleDragOver}\n            onDrop={(e) => handleDrop(e, column.id)}\n          >\n            <div className=\"flex items-center justify-between mb-6\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-4 h-4 rounded-full \" style={{ backgroundColor: column.color }} />\n                <h3 className=\"font-semibold text-neutral-900 dark:text-neutral-100\">\n                  {column.title}\n                </h3>\n                <Badge className=\"bg-neutral-100/80 dark:bg-neutral-800/80 text-neutral-800 dark:text-neutral-200 border-neutral-200/50 dark:border-neutral-600/50\">\n                  {column.tasks.length}\n                </Badge>\n              </div>\n              <button className=\"p-1 rounded-full bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-700/50 transition-colors\">\n                <Plus className=\"w-4 h-4 text-neutral-700 dark:text-neutral-300\" />\n              </button>\n            </div>\n\n            <div className=\"space-y-4\">\n              {column.tasks.map((task) => (\n                <Card\n                  key={task.id}\n                  className=\"cursor-move transition-all duration-300 border bg-white/60 dark:bg-neutral-800/60 backdrop-blur-xs hover:bg-white/70 dark:hover:bg-neutral-700/70\"\n                  draggable\n                  onDragStart={(e) => handleDragStart(e, task, column.id)}\n                >\n                  <CardContent className=\"p-5\">\n                    <div className=\"space-y-4\">\n                      <div className=\"flex items-start justify-between\">\n                        <h4 className=\"font-semibold text-neutral-900 dark:text-neutral-100 leading-tight\">\n                          {task.title}\n                        </h4>\n                        <GripVertical className=\"w-5 h-5 text-neutral-500 dark:text-neutral-400 cursor-move\" />\n                      </div>\n\n                      {task.description && (\n                        <p className=\"text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed\">\n                          {task.description}\n                        </p>\n                      )}\n\n                      {task.tags && (\n                        <div className=\"flex flex-wrap gap-2\">\n                          {task.tags.map((tag) => (\n                            <Badge\n                              key={tag}\n                              className=\"text-xs bg-neutral-100/60 dark:bg-neutral-700/60 text-neutral-800 dark:text-neutral-200 border-neutral-200/50 dark:border-neutral-600/50 backdrop-blur-xs\"\n                            >\n                              {tag}\n                            </Badge>\n                          ))}\n                        </div>\n                      )}\n\n                      <div className=\"flex items-center justify-between pt-2 border-t border-neutral-200/30 dark:border-neutral-700/30\">\n                        <div className=\"flex items-center gap-4 text-neutral-600 dark:text-neutral-400\">\n                          {task.dueDate && (\n                            <div className=\"flex items-center gap-1\">\n                              <Calendar className=\"w-4 h-4\" />\n                              <span className=\"text-xs font-medium\">Jan 15</span>\n                            </div>\n                          )}\n                          {task.comments && (\n                            <div className=\"flex items-center gap-1\">\n                              <MessageCircle className=\"w-4 h-4\" />\n                              <span className=\"text-xs font-medium\">{task.comments}</span>\n                            </div>\n                          )}\n                          {task.attachments && (\n                            <div className=\"flex items-center gap-1\">\n                              <Paperclip className=\"w-4 h-4\" />\n                              <span className=\"text-xs font-medium\">{task.attachments}</span>\n                            </div>\n                          )}\n                        </div>\n\n                        {task.assignee && (\n                          <Avatar className=\"w-8 h-8 ring-2 ring-white/50 dark:ring-neutral-700/50\">\n                            <AvatarImage src={task.assignee.avatar} />\n                            <AvatarFallback className=\"bg-neutral-200 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200 font-medium\">\n                              {task.assignee.name\n                                .split(' ')\n                                .map((n) => n[0])\n                                .join('')}\n                            </AvatarFallback>\n                          </Avatar>\n                        )}\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/kanbanboard.tsx"
    }
  ],
  "type": "registry:component"
}