{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "site-kanban",
  "type": "registry:ui",
  "description": "Kanban board component for showcasing features and content",
  "files": [
    {
      "path": "packages/site/kanban.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\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\ninterface 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-sm 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-sm\"\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"
    }
  ]
}