{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-kanban-1","type":"registry:block","title":"Kanban board with placeholder overlay","description":"Kanban board with placeholder overlay","dependencies":[],"registryDependencies":["avatar","@reui/badge","button","card","@reui/kanban"],"files":[{"path":"c-kanban-1.tsx","type":"registry:block","content":"\"use client\"\n\nimport { ComponentProps, useState } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport {\n  Kanban,\n  KanbanBoard,\n  KanbanColumn,\n  KanbanColumnContent,\n  KanbanColumnHandle,\n  KanbanItem,\n  KanbanItemHandle,\n  KanbanOverlay,\n} from \"@/components/reui/kanban\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface Task {\n  id: string\n  title: string\n  priority: \"low\" | \"medium\" | \"high\"\n  description?: string\n  assignee?: string\n  assigneeAvatar?: string\n  dueDate?: string\n}\n\nconst COLUMN_TITLES: Record<string, string> = {\n  backlog: \"Backlog\",\n  inProgress: \"In Progress\",\n  review: \"Review\",\n  done: \"Done\",\n}\n\ninterface TaskCardProps extends Omit<\n  ComponentProps<typeof KanbanItem>,\n  \"value\" | \"children\"\n> {\n  task: Task\n  asHandle?: boolean\n  isOverlay?: boolean\n}\n\nfunction TaskCard({ task, asHandle, isOverlay, ...props }: TaskCardProps) {\n  const cardContent = (\n    <Card>\n      <CardContent className=\"space-y-2.5\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"line-clamp-1 text-sm font-medium\">{task.title}</span>\n          <Badge\n            variant={\n              task.priority === \"high\"\n                ? \"destructive-light\"\n                : task.priority === \"medium\"\n                  ? \"primary-light\"\n                  : \"warning-light\"\n            }\n            className=\"pointer-events-none h-5 shrink-0 rounded-sm px-1.5 text-xs capitalize\"\n          >\n            {task.priority}\n          </Badge>\n        </div>\n        <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n          {task.assignee && (\n            <div className=\"flex items-center gap-1\">\n              <Avatar className=\"size-4\">\n                <AvatarImage src={task.assigneeAvatar} />\n                <AvatarFallback>{task.assignee.charAt(0)}</AvatarFallback>\n              </Avatar>\n              <span className=\"line-clamp-1\">{task.assignee}</span>\n            </div>\n          )}\n          {task.dueDate && (\n            <time className=\"text-[10px] whitespace-nowrap tabular-nums\">\n              {task.dueDate}\n            </time>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  return (\n    <KanbanItem value={task.id} {...props}>\n      {asHandle && !isOverlay ? (\n        <KanbanItemHandle>{cardContent}</KanbanItemHandle>\n      ) : (\n        cardContent\n      )}\n    </KanbanItem>\n  )\n}\n\ninterface TaskColumnProps extends Omit<\n  ComponentProps<typeof KanbanColumn>,\n  \"children\"\n> {\n  tasks: Task[]\n  isOverlay?: boolean\n}\n\nfunction TaskColumn({ value, tasks, isOverlay, ...props }: TaskColumnProps) {\n  return (\n    <KanbanColumn value={value} {...props}>\n      <Card className=\"mb-2.5\">\n        <CardHeader className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2.5\">\n            <span className=\"text-sm font-semibold\">\n              {COLUMN_TITLES[value]}\n            </span>\n            <Badge variant=\"outline\">{tasks.length}</Badge>\n          </div>\n          <KanbanColumnHandle\n            render={(props) => (\n              <Button {...props} size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"GripVerticalIcon\"\n                  tabler=\"IconGripVertical\"\n                  hugeicons=\"DragDropVerticalIcon\"\n                  phosphor=\"DotsSixVerticalIcon\"\n                  remixicon=\"RiDraggable\"\n                />\n              </Button>\n            )}\n          />\n        </CardHeader>\n        <CardContent>\n          <KanbanColumnContent value={value} className=\"flex flex-col gap-2.5\">\n            {tasks.map((task) => (\n              <TaskCard\n                key={task.id}\n                task={task}\n                asHandle={!isOverlay}\n                isOverlay={isOverlay}\n              />\n            ))}\n          </KanbanColumnContent>\n        </CardContent>\n      </Card>\n    </KanbanColumn>\n  )\n}\n\nexport function Pattern() {\n  const [columns, setColumns] = useState<Record<string, Task[]>>({\n    backlog: [\n      {\n        id: \"1\",\n        title: \"Add authentication\",\n        priority: \"high\",\n        assignee: \"Alex Johnson\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Jan 10, 2025\",\n      },\n      {\n        id: \"2\",\n        title: \"Create API endpoints\",\n        priority: \"medium\",\n        assignee: \"Sarah Chen\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Jan 15, 2025\",\n      },\n      {\n        id: \"3\",\n        title: \"Write documentation\",\n        priority: \"low\",\n        assignee: \"Michael Rodriguez\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Jan 20, 2025\",\n      },\n    ],\n    inProgress: [\n      {\n        id: \"4\",\n        title: \"Design system updates\",\n        priority: \"high\",\n        assignee: \"Emma Wilson\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Aug 25, 2025\",\n      },\n      {\n        id: \"5\",\n        title: \"Implement dark mode\",\n        priority: \"medium\",\n        assignee: \"David Kim\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Aug 25, 2025\",\n      },\n    ],\n    done: [\n      {\n        id: \"7\",\n        title: \"Setup project\",\n        priority: \"high\",\n        assignee: \"Aron Thompson\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Sep 25, 2025\",\n      },\n      {\n        id: \"8\",\n        title: \"Initial commit\",\n        priority: \"low\",\n        assignee: \"James Brown\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80\",\n        dueDate: \"Sep 20, 2025\",\n      },\n    ],\n  })\n\n  return (\n    <Kanban\n      value={columns}\n      onValueChange={setColumns}\n      getItemValue={(item) => item.id}\n    >\n      <KanbanBoard className=\"grid auto-rows-fr grid-cols-3\">\n        {Object.entries(columns).map(([columnValue, tasks]) => (\n          <TaskColumn key={columnValue} value={columnValue} tasks={tasks} />\n        ))}\n      </KanbanBoard>\n      <KanbanOverlay className=\"bg-muted/10 rounded-md border-2 border-dashed\" />\n    </Kanban>\n  )\n}","target":"components/examples/c-kanban-1.tsx"}],"meta":{"order":1,"gridSize":1}}