{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kanban-board-demo",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "kanban-board"
  ],
  "files": [
    {
      "path": "registry/default/example/kanban-board-demo.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport { MotionConfig } from \"motion/react\"\n\nimport {\n  Column,\n  gentleSpring,\n  type ColumnData,\n  type ColumnStatus,\n  type DragState,\n} from \"@/registry/default/ui/kanban-board\"\n\nconst SAMPLE_COLUMNS: ColumnData[] = [\n  {\n    id: \"todo\",\n    title: \"Backlog\",\n    status: \"todo\",\n    cards: [\n      {\n        id: \"1\",\n        title: \"Draft Q2 nurture email series\",\n        tags: [{ label: \"Campaign\", variant: \"feature\" }],\n        assignee: {\n          name: \"Méschac Irung\",\n          avatar: \"https://i.pravatar.cc/80?img=11\",\n        },\n        date: \"Jan 8\",\n      },\n      {\n        id: \"2\",\n        title: \"Fix broken UTMs on paid search ads\",\n        tags: [{ label: \"Tracking\", variant: \"bug\" }],\n        assignee: {\n          name: \"Bernard Ngandu\",\n          avatar: \"https://i.pravatar.cc/80?img=12\",\n        },\n        date: \"Jan 5\",\n      },\n      {\n        id: \"6\",\n        title: \"Refresh one-pager for enterprise pitch\",\n        tags: [{ label: \"Collateral\", variant: \"docs\" }],\n        assignee: { name: \"Anika Patel\" },\n        date: \"Jan 9\",\n      },\n    ],\n  },\n  {\n    id: \"in-progress\",\n    title: \"In flight\",\n    status: \"in-progress\",\n    cards: [\n      {\n        id: \"3\",\n        title: \"Homepage hero & social proof block\",\n        tags: [{ label: \"Creative\", variant: \"design\" }],\n        assignee: {\n          name: \"Théo Balick\",\n          avatar: \"https://i.pravatar.cc/80?img=33\",\n        },\n        date: \"Jan 6\",\n      },\n      {\n        id: \"7\",\n        title: \"A/B test LinkedIn lead-gen forms\",\n        tags: [{ label: \"Growth\", variant: \"improvement\" }],\n        assignee: {\n          name: \"Liam Chen\",\n          avatar: \"https://i.pravatar.cc/80?img=53\",\n        },\n        date: \"Jan 7\",\n      },\n    ],\n  },\n  {\n    id: \"done\",\n    title: \"Launched\",\n    status: \"done\",\n    cards: [\n      {\n        id: \"4\",\n        title: \"Spring launch landing page live\",\n        tags: [{ label: \"Launch\", variant: \"done\" }],\n        assignee: {\n          name: \"Méschac Irung\",\n          avatar: \"https://i.pravatar.cc/80?img=11\",\n        },\n        date: \"Jan 3\",\n      },\n    ],\n  },\n]\n\nfunction KanbanBoardDemo() {\n  const [columns, setColumns] = useState<ColumnData[]>(SAMPLE_COLUMNS)\n  const [dragState, setDragState] = useState<DragState>(null)\n\n  const handleDrop = useCallback(\n    (cardId: string, fromColumnId: ColumnStatus, toColumnId: ColumnStatus) => {\n      if (fromColumnId === toColumnId) {\n        return\n      }\n      setColumns((prev) => {\n        const fromCol = prev.find((c) => c.id === fromColumnId)\n        const card = fromCol?.cards.find((c) => c.id === cardId)\n        if (!card) {\n          return prev\n        }\n        return prev.map((col) => {\n          if (col.id === fromColumnId) {\n            return {\n              ...col,\n              cards: col.cards.filter((c) => c.id !== cardId),\n            }\n          }\n          if (col.id === toColumnId) {\n            return { ...col, cards: [...col.cards, card] }\n          }\n          return col\n        })\n      })\n    },\n    []\n  )\n\n  return (\n    <MotionConfig transition={gentleSpring}>\n      <div\n        className=\"flex min-h-[500px] w-full max-w-4xl items-start justify-center bg-[#f0f0f0]/20 px-6 py-12 antialiased dark:bg-transparent\"\n        style={{\n          fontFamily:\n            '-apple-system, BlinkMacSystemFont, \"SF Pro Display\", system-ui, sans-serif',\n          WebkitFontSmoothing: \"antialiased\",\n        }}\n      >\n        <div className=\"w-full max-w-[520px]\">\n          <div className=\"grid grid-cols-3 gap-5\">\n            {columns.map((col) => (\n              <Column\n                column={col}\n                dragState={dragState}\n                key={col.id}\n                onDrop={handleDrop}\n                setDragState={setDragState}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </MotionConfig>\n  )\n}\n\nexport default KanbanBoardDemo\n",
      "type": "registry:component"
    }
  ]
}