{
  "name": "sortable-dynamic-overlay-demo",
  "type": "registry:example",
  "dependencies": [
    "@dnd-kit/core",
    "@dnd-kit/modifiers",
    "@dnd-kit/sortable",
    "@dnd-kit/utilities"
  ],
  "registryDependencies": [
    "sortable"
  ],
  "files": [
    {
      "path": "examples/sortable-dynamic-overlay-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Sortable,\n  SortableContent,\n  SortableItem,\n  SortableOverlay,\n} from \"@/registry/bases/radix/ui/sortable\";\n\ninterface Trick {\n  id: string;\n  title: string;\n  description: string;\n}\n\nexport default function SortableDynamicOverlayDemo() {\n  const [tricks, setTricks] = React.useState<Trick[]>([\n    {\n      id: \"1\",\n      title: \"The 900\",\n      description: \"The 900 is a trick where you spin 900 degrees in the air.\",\n    },\n    {\n      id: \"2\",\n      title: \"Indy Backflip\",\n      description:\n        \"The Indy Backflip is a trick where you backflip in the air.\",\n    },\n    {\n      id: \"3\",\n      title: \"Pizza Guy\",\n      description: \"The Pizza Guy is a trick where you flip the pizza guy.\",\n    },\n    {\n      id: \"4\",\n      title: \"Rocket Air\",\n      description: \"The Rocket Air is a trick where you rocket air.\",\n    },\n    {\n      id: \"5\",\n      title: \"Kickflip Backflip\",\n      description:\n        \"The Kickflip Backflip is a trick where you kickflip backflip.\",\n    },\n    {\n      id: \"6\",\n      title: \"FS 540\",\n      description: \"The FS 540 is a trick where you fs 540.\",\n    },\n  ]);\n\n  return (\n    <Sortable\n      value={tricks}\n      onValueChange={setTricks}\n      getItemValue={(item) => item.id}\n      orientation=\"mixed\"\n    >\n      <SortableContent className=\"grid auto-rows-fr grid-cols-3 gap-2.5\">\n        {tricks.map((trick) => (\n          <TrickCard key={trick.id} trick={trick} asHandle />\n        ))}\n      </SortableContent>\n      <SortableOverlay>\n        {(activeItem) => {\n          const trick = tricks.find((trick) => trick.id === activeItem.value);\n\n          if (!trick) return null;\n\n          return <TrickCard trick={trick} />;\n        }}\n      </SortableOverlay>\n    </Sortable>\n  );\n}\n\ninterface TrickCardProps extends Omit<\n  React.ComponentPropsWithoutRef<typeof SortableItem>,\n  \"value\"\n> {\n  trick: Trick;\n}\n\nfunction TrickCard({ trick, ...props }: TrickCardProps) {\n  return (\n    <SortableItem value={trick.id} asChild {...props}>\n      <div className=\"flex size-full flex-col gap-1 rounded-md border bg-zinc-100 p-4 text-foreground shadow-sm dark:bg-zinc-900\">\n        <div className=\"text-sm leading-tight font-medium sm:text-base\">\n          {trick.title}\n        </div>\n        <span className=\"line-clamp-2 hidden text-sm text-muted-foreground sm:inline-block\">\n          {trick.description}\n        </span>\n      </div>\n    </SortableItem>\n  );\n}\n",
      "target": ""
    }
  ]
}