{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dock-demo",
  "type": "registry:component",
  "registryDependencies": [
    "dock"
  ],
  "files": [
    {
      "path": "registry/default/example/dock-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport {\n  BlocksIcon,\n  CircleIcon,\n  HexagonIcon,\n  OctagonIcon,\n  PentagonIcon,\n  SquareIcon,\n  TriangleIcon,\n} from \"lucide-react\"\n\nimport {\n  Dock,\n  DockCard,\n  DockCardInner,\n  DockDivider,\n} from \"@/registry/default/ui/dock\"\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = useState(false)\n\n  useEffect(() => {\n    const userAgent = navigator.userAgent\n    const isSmall = window.matchMedia(\"(max-width: 768px)\").matches\n    const isMobile = Boolean(\n      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.exec(\n        userAgent\n      )\n    )\n\n    const isDev = process.env.NODE_ENV !== \"production\"\n    if (isDev) setIsMobile(isSmall || isMobile)\n\n    setIsMobile(isSmall && isMobile)\n  }, [])\n\n  return isMobile\n}\n\n// Main component to display the dock with cards\nlet gradients = [\n  \"https://products.ls.graphics/mesh-gradients/images/03.-Snowy-Mint_1-p-130x130q80.jpeg\",\n  \"https://products.ls.graphics/mesh-gradients/images/04.-Hopbush_1-p-130x130q80.jpeg\",\n  \"https://products.ls.graphics/mesh-gradients/images/06.-Wisteria-p-130x130q80.jpeg\",\n  \"https://products.ls.graphics/mesh-gradients/images/09.-Light-Sky-Blue-p-130x130q80.jpeg\",\n  \"https://products.ls.graphics/mesh-gradients/images/12.-Tumbleweed-p-130x130q80.jpeg\",\n  \"https://products.ls.graphics/mesh-gradients/images/15.-Perfume_1-p-130x130q80.jpeg\",\n  null,\n  \"https://products.ls.graphics/mesh-gradients/images/36.-Pale-Chestnut-p-130x130q80.jpeg\",\n]\n\nfunction DockAnimation() {\n  let openIcons = [\n    <CircleIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n    <TriangleIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n    <SquareIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n    <PentagonIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n    <HexagonIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n    <OctagonIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n    null, // skip\n    <BlocksIcon className=\"h-8 w-8 rounded-full fill-black stroke-black\" />,\n  ]\n\n  const isMobile = useIsMobile()\n\n  const responsiveOpenIcons = isMobile\n    ? openIcons.slice(3, openIcons.length)\n    : openIcons\n  const responsiveGradients = isMobile\n    ? gradients.slice(3, gradients.length)\n    : gradients\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <Dock>\n        {responsiveGradients.map((src, index) =>\n          src ? (\n            <DockCard key={src} id={`${index}`}>\n              <DockCardInner src={src} id={`${index}`}>\n                {responsiveOpenIcons[index]}\n              </DockCardInner>\n            </DockCard>\n          ) : (\n            <DockDivider key={index} />\n          )\n        )}\n      </Dock>\n    </div>\n  )\n}\n\nexport default DockAnimation\n",
      "type": "registry:component"
    }
  ]
}