{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-kanban-4","type":"registry:block","title":"Minimal kanban with stacked frame","description":"Minimal kanban with stacked frame","dependencies":[],"registryDependencies":["avatar","@reui/badge","@reui/frame","@reui/kanban","progress"],"files":[{"path":"c-kanban-4.tsx","type":"registry:block","content":"\"use client\"\n\nimport { ComponentProps, useState } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/components/reui/frame\"\nimport {\n  Kanban,\n  KanbanBoard,\n  KanbanColumn,\n  KanbanColumnContent,\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 { Progress } from \"@/components/ui/progress\"\n\ninterface Task {\n  id: string\n  title: string\n  assignee: string\n  assigneeAvatar: string\n  progress: number\n}\n\nfunction TaskCard({\n  task,\n  asHandle,\n  ...props\n}: { task: Task; asHandle?: boolean } & Omit<\n  ComponentProps<typeof KanbanItem>,\n  \"value\" | \"children\"\n>) {\n  const content = (\n    <Frame variant=\"ghost\" spacing=\"xs\" className=\"p-0\">\n      <FramePanel className=\"space-y-3 p-3\">\n        <p className=\"text-sm font-medium\">{task.title}</p>\n        <Progress\n          value={task.progress}\n          className=\"[&_[data-slot=progress-track]]:h-1\"\n        />\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-1.5\">\n            <Avatar className=\"size-5\">\n              <AvatarImage src={task.assigneeAvatar} alt={task.assignee} />\n              <AvatarFallback className=\"text-[9px]\">\n                {task.assignee.charAt(0)}\n              </AvatarFallback>\n            </Avatar>\n            <span className=\"text-muted-foreground text-xs\">\n              {task.assignee}\n            </span>\n          </div>\n          <span className=\"text-muted-foreground text-xs\">\n            {task.progress}%\n          </span>\n        </div>\n      </FramePanel>\n    </Frame>\n  )\n\n  return (\n    <KanbanItem value={task.id} {...props}>\n      {asHandle ? <KanbanItemHandle>{content}</KanbanItemHandle> : content}\n    </KanbanItem>\n  )\n}\n\nexport function Pattern() {\n  const [columns, setColumns] = useState<Record<string, Task[]>>({\n    planning: [\n      {\n        id: \"1\",\n        title: \"Research competitors\",\n        assignee: \"Alex J.\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n        progress: 20,\n      },\n    ],\n    active: [\n      {\n        id: \"2\",\n        title: \"Build dashboard\",\n        assignee: \"Sarah C.\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n        progress: 65,\n      },\n      {\n        id: \"3\",\n        title: \"API integration\",\n        assignee: \"David K.\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n        progress: 40,\n      },\n    ],\n    completed: [\n      {\n        id: \"4\",\n        title: \"Setup repository\",\n        assignee: \"Emma W.\",\n        assigneeAvatar:\n          \"https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80\",\n        progress: 100,\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(([columnId, tasks]) => (\n          <KanbanColumn key={columnId} value={columnId}>\n            <Frame stacked spacing=\"sm\" className=\"h-full\">\n              <FrameHeader>\n                <div className=\"flex items-center justify-between\">\n                  <FrameTitle className=\"capitalize\">{columnId}</FrameTitle>\n                  <Badge variant=\"outline\" size=\"sm\">\n                    {tasks.length}\n                  </Badge>\n                </div>\n                <FrameDescription>\n                  {columnId === \"planning\" && \"Tasks being scoped\"}\n                  {columnId === \"active\" && \"Currently in development\"}\n                  {columnId === \"completed\" && \"Finished and deployed\"}\n                </FrameDescription>\n              </FrameHeader>\n              <KanbanColumnContent\n                value={columnId}\n                className=\"flex flex-col gap-2 p-0.5\"\n              >\n                {tasks.map((task) => (\n                  <TaskCard key={task.id} task={task} asHandle />\n                ))}\n              </KanbanColumnContent>\n            </Frame>\n          </KanbanColumn>\n        ))}\n      </KanbanBoard>\n      <KanbanOverlay className=\"bg-muted/10 rounded-md border-2 border-dashed\" />\n    </Kanban>\n  )\n}","target":"components/examples/c-kanban-4.tsx"}],"meta":{"order":4,"gridSize":1,"label":"Stacked Frame"}}