{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "grid-list-drag-example",
  "title": "Grid List Drag",
  "description": "grid-list-drag-example",
  "dependencies": [
    "react-aria-components",
    "react-stately"
  ],
  "registryDependencies": [
    "https://intentui.com/r/grid-list"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/grid-list/grid-list-drag-example.tsx",
      "content": "'use client'\n\nimport { useDragAndDrop } from 'react-aria-components/useDragAndDrop'\nimport { useListData } from 'react-stately/useListData'\nimport { GridList, GridListItem } from '@/components/ui/grid-list'\n\nexport default function GridListDragDemo() {\n  const list = useListData({\n    initialItems: items,\n  })\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) =>\n      [...keys].map((key) => ({\n        'text/plain': list.getItem(key)?.name ?? '',\n      })),\n    onReorder(e) {\n      if (e.target.dropPosition === 'before') {\n        list.moveBefore(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'after') {\n        list.moveAfter(e.target.key, e.keys)\n      }\n    },\n  })\n\n  return (\n    <GridList\n      items={list.items}\n      aria-label=\"Droppable list\"\n      selectionMode=\"multiple\"\n      dragAndDropHooks={dragAndDropHooks}\n    >\n      {(item) => <GridListItem id={item.id}>{item.name}</GridListItem>}\n    </GridList>\n  )\n}\n\nconst items = [\n  { id: 1, name: 'The Beatles' },\n  { id: 2, name: 'Led Zeppelin' },\n  { id: 3, name: 'Pink Floyd' },\n  { id: 4, name: 'Queen' },\n  { id: 5, name: 'The Rolling Stones' },\n  { id: 6, name: 'The Beach Boys' },\n  { id: 7, name: 'The Kinks' },\n  { id: 8, name: 'The Who' },\n]\n",
      "type": "registry:page",
      "target": "app/grid-list-drag-example/page.tsx"
    }
  ],
  "type": "registry:page"
}