{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dock-demo",
  "title": "Dock Demo",
  "description": "Example showing a dock component.",
  "files": [
    {
      "path": "registry/example/dock-demo.tsx",
      "content": "'use client'\nimport { useState } from \"react\";\nimport { Dock, DockItem, DockIcon, DockLabel } from \"../pioneerui/dock\";\nimport { HeartIcon, WalletIcon, StoreIcon, PodcastIcon, TvIcon, MusicIcon } from \"lucide-react\"; // Adjust the import path as necessary\nimport {cn} from \"@/lib/utils\";\n\nconst dockItems = {\n    media: [\n        {\n        label: \"Music\",\n        icon: MusicIcon,\n        href: \"https://www.apple.com/music/\",\n        target: \"_blank\",\n        },\n        {\n        label: \"TV\",\n        icon: TvIcon,\n        href: \"https://www.apple.com/apple-tv-plus/\",\n        target: \"_blank\",\n        },\n        {\n        label: \"Podcasts\",\n        icon: PodcastIcon,\n        href: \"https://www.apple.com/podcasts/\",\n        target: \"_blank\",\n        },\n    ],\n}\nexport default function DockDemo() {\n    const [activeTab] = useState<string>(\"media\")\n    return (\n        <div>\n        <Dock>\n              {dockItems[activeTab as keyof typeof dockItems].map((item, index) => (\n                <DockItem\n                  key={item.label}\n                  href={item.href}\n                  target={item.target}\n                  className={cn(\"transition-colors\", activeTab === \"media\" && \"text-purple-400 hover:text-purple-300\")}\n                >\n                  <DockIcon>\n                    <item.icon className=\"h-8 w-8\" />\n                  </DockIcon>\n                  <DockLabel>{item.label}</DockLabel>\n                </DockItem>\n              ))}\n            </Dock>\n        </div>\n    );\n    }\n",
      "type": "registry:example",
      "target": "components/dock-demo.tsx"
    }
  ],
  "type": "registry:example"
}