{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-nav-bar",
  "type": "registry:block",
  "title": "3d nav bar",
  "description": "3d nav bar",
  "files": [
    {
      "path": "components/usages/3dnavbarusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport NavBar from \"@/registry/open-source/3d-nav-bar\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"relative w-full flex items-center justify-center\">\n\t\t\t<NavBar className=\"top-2\" />\n\t\t\t<p className=\"text-secondary dark:text-secondary\">\n\t\t\t\tThe Navbar will show on top of the page\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/3dnavbarusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport NavBar from \"@/registry/open-source/3d-nav-bar\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"relative w-full flex items-center justify-center\">\n\t\t\t<NavBar className=\"top-2\" />\n\t\t\t<p className=\"text-secondary dark:text-secondary\">\n\t\t\t\tThe Navbar will show on top of the page\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/3d-nav-bar.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport Link from \"next/link\";\n\nimport { ModeToggle } from \"@/components/ui/mode-toggle\";\nimport { motion } from \"motion/react\";\n\nimport { CardBody, CardContainer, CardItem } from \"./3d-card\";\nimport MobileNav from \"./mobile-nav-basic\";\n\n// import { debounce } from \"../utils/debounce\";\n\n// https://ui.aceternity.com/components/navbar-menu\n\nconst transition = {\n\ttype: \"spring\",\n\tmass: 0.5,\n\tdamping: 11.5,\n\tstiffness: 100,\n\trestDelta: 0.001,\n\trestSpeed: 0.001,\n};\n\nexport const MenuItem = ({\n\tsetActive,\n\tactive,\n\titem,\n\tchildren,\n\tto,\n\tuuid,\n}: {\n\tsetActive: (item: string) => void;\n\tactive: string | null;\n\titem: string;\n\tchildren?: React.ReactNode;\n\tto?: string;\n\tuuid?: string;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tonMouseEnter={() => setActive(item)}\n\t\t\tclassName=\"relative z-50 px-2 py-6\"\n\t\t\tkey={uuid || null}\n\t\t>\n\t\t\t<motion.p\n\t\t\t\ttransition={{ duration: 0.3 }}\n\t\t\t\tclassName=\"cursor-default text-foreground hover:opacity-[0.9] dark:text-foreground\"\n\t\t\t>\n\t\t\t\t{item}\n\t\t\t</motion.p>\n\t\t\t{active !== null && (\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={{ opacity: 0, scale: 0.85, y: 10, borderRadius: \"6px\" }}\n\t\t\t\t\tanimate={{ opacity: 1, scale: 1, y: 0 }}\n\t\t\t\t\ttransition={transition}\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t>\n\t\t\t\t\t{active === item && (\n\t\t\t\t\t\t<div className=\"absolute left-1/2 transform -translate-x-1/2 pt-4\">\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\tlayoutId=\"active\" // layoutId ensures smooth animation\n\t\t\t\t\t\t\t\tclassName=\"bg-background dark:bg-background backdrop-blur-xs rounded-md overflow-hidden border border-black/20 dark:border-white/20 shadow-xl\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tlayout // layout ensures smooth animation\n\t\t\t\t\t\t\t\t\tclassName=\"w-max h-full p-4\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</motion.div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport const Menu = ({\n\tsetActive,\n\tchildren,\n}: {\n\tsetActive: (item: string | null) => void;\n\tchildren: React.ReactNode;\n}) => {\n\treturn (\n\t\t<div className=\"relative w-full border border-transparent dark:bg-background dark:border-white/20 bg-background shadow-input flex justify-center\">\n\t\t\t<div\n\t\t\t\tonMouseLeave={() => setActive(null)} // resets the state\n\t\t\t\tclassName=\"flex justify-center items-center px-1 lg:w-full my-4\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const ThreeDProductItem = ({\n\ttitle,\n\tdescription,\n\thref,\n\tsrc,\n\t...rest\n}: {\n\ttitle: string;\n\tdescription: string;\n\thref: string;\n\tsrc: string;\n}) => {\n\treturn (\n\t\t<CardContainer containerClassName=\"flex space-x-2 p-4\" {...rest}>\n\t\t\t<CardBody className=\"h-24 w-24\">\n\t\t\t\t<CardItem translateZ={400}>\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\twidth={70}\n\t\t\t\t\t\theight={35}\n\t\t\t\t\t\talt={title}\n\t\t\t\t\t\tclassName=\"shrink-0 rounded-md shadow-2xl object-cover\"\n\t\t\t\t\t/>\n\t\t\t\t</CardItem>\n\t\t\t\t<CardItem>\n\t\t\t\t\t<h4 className=\"text-xl font-bold mb-1 text-foreground dark:text-foreground\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h4>\n\t\t\t\t\t<p className=\"text-foreground text-sm max-w-40 dark:text-foreground\">\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</p>\n\t\t\t\t</CardItem>\n\t\t\t</CardBody>\n\t\t</CardContainer>\n\t);\n};\n\nexport const ProductItem = ({\n\ttitle,\n\tdescription,\n\thref,\n\tsrc,\n\t...rest\n}: {\n\ttitle: string;\n\tdescription: string;\n\thref: string;\n\tsrc: string;\n}) => {\n\treturn (\n\t\t<div className=\"flex space-x-2\" {...rest}>\n\t\t\t<img\n\t\t\t\tsrc={src}\n\t\t\t\twidth={70}\n\t\t\t\theight={35}\n\t\t\t\talt={title}\n\t\t\t\tclassName=\"shrink-0 rounded-md shadow-2xl object-cover\"\n\t\t\t/>\n\t\t\t<div>\n\t\t\t\t<h4 className=\"text-xl font-bold mb-1 text-foreground dark:text-foreground\">\n\t\t\t\t\t{title}\n\t\t\t\t</h4>\n\t\t\t\t<p className=\"text-foreground text-sm max-w-40 dark:text-foreground\">\n\t\t\t\t\t{description}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const HoveredLink = ({ children, ...rest }: any) => {\n\treturn (\n\t\t<Link\n\t\t\t{...rest}\n\t\t\tprefetch={false}\n\t\t\tclassName=\"text-foreground dark:text-foreground hover:text-foreground \"\n\t\t>\n\t\t\t{children}\n\t\t</Link>\n\t);\n};\n\nconst NavBar = ({ routes }: { routes: any[] }) => {\n\tconst [selected, setSelected] = useState(null);\n\tconst [hovered, setHovered] = useState(null);\n\n\tconst checkDescendants = (route: any) => {\n\t\treturn route.descendants.map((routeDescendant: any) => {\n\t\t\tif (\n\t\t\t\t!!routeDescendant.descendants &&\n\t\t\t\t!!routeDescendant.descendants.length\n\t\t\t) {\n\t\t\t\treturn (\n\t\t\t\t\t<div key={routeDescendant.slug}>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t{routeDescendant.title}\n\t\t\t\t\t\t\t<span className={\"\"}>&gt;</span>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{routeDescendant.descendants.map(checkDescendants)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t// Only render routes directly below the header route\n\t\t\treturn route.level + 1 === routeDescendant.level ? (\n\t\t\t\t<HoveredLink\n\t\t\t\t\thref={`/${routeDescendant.uri}`}\n\t\t\t\t\tkey={routeDescendant.slug}\n\t\t\t\t\tonMouseEnter={() => setHovered(routeDescendant)}\n\t\t\t\t>\n\t\t\t\t\t{routeDescendant.title}\n\t\t\t\t</HoveredLink>\n\t\t\t) : null;\n\t\t});\n\t};\n\n\treturn (\n\t\t<div className=\"dark:text-foreground relative z-50\">\n\t\t\t<MobileNav />\n\t\t\t<header className=\"hidden md:block\">\n\t\t\t\t<Menu setActive={setSelected}>\n\t\t\t\t\t{routes\n\t\t\t\t\t\t?.filter(\n\t\t\t\t\t\t\t(route) => route.level === 1 || route.typeHandle === \"home\"\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.map((route) => {\n\t\t\t\t\t\t\treturn !!route.children.length ||\n\t\t\t\t\t\t\t\troute.typeHandle === \"newsListing\" ? (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tto={route.slug}\n\t\t\t\t\t\t\t\t\titem={route.title}\n\t\t\t\t\t\t\t\t\tsetActive={setSelected}\n\t\t\t\t\t\t\t\t\tactive={selected}\n\t\t\t\t\t\t\t\t\tuuid={route.slug}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"flex\">\n\t\t\t\t\t\t\t\t\t\t{hovered?.headerImage?.[0] ? (\n\t\t\t\t\t\t\t\t\t\t\t<img src={hovered?.headerImage[0].url} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-center w-full h-48 bg-background rounded sm:w-96 dark:bg-background\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-10 h-10 text-foreground dark:text-foreground\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 20 18\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<div className=\"text-sm grid grid-cols-3 md:grid-cols-4 gap-5 p-4\">\n\t\t\t\t\t\t\t\t\t\t\t{route.typeHandle === \"newsListing\"\n\t\t\t\t\t\t\t\t\t\t\t\t? routes\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(route) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\troute.typeHandle === \"news\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map((item) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<HoveredLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thref={`/${item.uri}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={item.slug}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonMouseEnter={() =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetHovered(item)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</HoveredLink>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t\t\t\t: route.children.map((item) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<HoveredLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thref={`/${item.uri}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={item.slug}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonMouseEnter={() =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetHovered(item)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</HoveredLink>\n\t\t\t\t\t\t\t\t\t\t\t\t\t))}{\" \"}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tprefetch={false}\n\t\t\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t\t\troute.typeHandle === \"home\"\n\t\t\t\t\t\t\t\t\t\t\t? \"/\"\n\t\t\t\t\t\t\t\t\t\t\t: `/${route.uri}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tkey={route.slug}\n\t\t\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\t\t\tsetHovered(null);\n\t\t\t\t\t\t\t\t\t\tsetSelected(null);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"mx-2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{route.title}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t<Link\n\t\t\t\t\t\tprefetch={false}\n\t\t\t\t\t\thref={\"https://www.admin.example.drivedev.net/access\"}\n\t\t\t\t\t\tkey={\"admin\"}\n\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\tsetHovered(null);\n\t\t\t\t\t\t\tsetSelected(null);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName=\"mx-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\tAdmin\n\t\t\t\t\t</Link>\n\t\t\t\t\t{/* <Notice /> */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\tsetHovered(null);\n\t\t\t\t\t\t\tsetSelected(null);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ModeToggle />\n\t\t\t\t\t</div>\n\t\t\t\t</Menu>\n\t\t\t</header>\n\t\t</div>\n\t);\n};\n\nexport default NavBar;\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/mode-toggle.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Moon, Sun } from \"lucide-react\";\r\nimport { useTheme } from \"next-themes\";\r\n\r\nexport function ModeToggle({ className }) {\r\n\tconst { setTheme, theme } = useTheme();\r\n\r\n\treturn (\r\n\t\t<Button\r\n\t\t\tsize=\"icon\"\r\n\t\t\tonClick={() => setTheme(theme === \"light\" ? \"dark\" : \"light\")}\r\n\t\t\tclassName={className}\r\n\t\t>\r\n\t\t\t<Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0\" />\r\n\t\t\t<Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100\" />\r\n\t\t\t<span className=\"sr-only\">Toggle theme</span>\r\n\t\t</Button>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/3d-card.tsx",
      "content": "\"use client\";\n\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\n// https://ui.aceternity.com/components/3d-card-effect\n\nconst MouseEnterContext = createContext<\n\t[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined\n>(undefined);\n\nexport const CardContainer = ({\n\tchildren,\n\tclassName,\n\tcontainerClassName,\n\tid,\n\ttitle,\n}: {\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tcontainerClassName?: string;\n\tid?: string;\n\ttitle?: string;\n}) => {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [isMouseEntered, setIsMouseEntered] = useState(false);\n\n\tconst handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (!containerRef.current) return;\n\t\tconst { left, top, width, height } =\n\t\t\tcontainerRef.current.getBoundingClientRect();\n\t\tconst x = (e.clientX - left - width / 2) / 25;\n\t\tconst y = (e.clientY - top - height / 2) / 25;\n\t\tcontainerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n\t};\n\n\tconst handleMouseEnter = () => {\n\t\tsetIsMouseEntered(true);\n\t\tif (!containerRef.current) return;\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\tif (!containerRef.current) return;\n\t\tsetIsMouseEntered(false);\n\t\tcontainerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;\n\t};\n\treturn (\n\t\t<MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pt-20 flex items-center justify-center\",\n\t\t\t\t\tcontainerClassName\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tperspective: \"1000px\",\n\t\t\t\t}}\n\t\t\t\tid={id}\n\t\t\t\ttitle={title}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={containerRef}\n\t\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex items-center justify-center relative transition-transform duration-200 ease-linear\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</MouseEnterContext.Provider>\n\t);\n};\n\nexport const CardBody = ({\n\tchildren,\n\tclassName,\n}: {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"transform-3d  *:transform-3d\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport const CardItem = ({\n\tas: Tag = \"div\",\n\tchildren,\n\tclassName,\n\ttranslateX = 0,\n\ttranslateY = 0,\n\ttranslateZ = 0,\n\trotateX = 0,\n\trotateY = 0,\n\trotateZ = 0,\n\t...rest\n}: {\n\tas?: React.ElementType;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\ttranslateX?: number | string;\n\ttranslateY?: number | string;\n\ttranslateZ?: number | string;\n\trotateX?: number | string;\n\trotateY?: number | string;\n\trotateZ?: number | string;\n\t[key: string]: any;\n}) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isMouseEntered] = useMouseEnter();\n\n\tuseEffect(() => {\n\t\thandleAnimations();\n\t}, [isMouseEntered]);\n\n\tconst handleAnimations = () => {\n\t\tif (!ref.current) return;\n\t\tif (isMouseEntered) {\n\t\t\tref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;\n\t\t} else {\n\t\t\tref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;\n\t\t}\n\t};\n\n\treturn (\n\t\t<Tag\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"transition duration-200 ease-linear\", className)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Tag>\n\t);\n};\n\n// Create a hook to use the context\nexport const useMouseEnter = () => {\n\tconst context = useContext(MouseEnterContext);\n\tif (context === undefined) {\n\t\tthrow new Error(\"useMouseEnter must be used within a MouseEnterProvider\");\n\t}\n\treturn context;\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/mobile-nav-basic.tsx",
      "content": "import React from \"react\";\n\nconst MobileNav = () => (\n  <header className=\"block md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-background border-t border-gray-200 dark:bg-background dark:border-gray-600\">\n    <div className=\"grid h-full max-w-lg grid-cols-5 mx-auto font-medium\">\n      <button\n        type=\"button\"\n        className=\"inline-flex flex-col items-center justify-center px-5 hover:bg-background dark:hover:bg-background group\"\n      >\n        <svg\n          className=\"w-5 h-5 mb-2 text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path d=\"m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z\" />\n        </svg>\n        <span className=\"text-sm text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\">\n          Home\n        </span>\n      </button>\n      <button\n        type=\"button\"\n        className=\"inline-flex flex-col items-center justify-center px-5 hover:bg-background dark:hover:bg-background group\"\n      >\n        <svg\n          className=\"w-5 h-5 mb-2 text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path d=\"M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z\" />\n          <path d=\"M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z\" />\n        </svg>\n        <span className=\"text-sm text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\">\n          Wallet\n        </span>\n      </button>\n      <button\n        type=\"button\"\n        className=\"inline-flex flex-col items-center justify-center px-5 hover:bg-background dark:hover:bg-background group\"\n      >\n        <svg\n          className=\"w-5 h-5 mb-2 text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2\"\n          />\n        </svg>\n        <span className=\"text-sm text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\">\n          Settings\n        </span>\n      </button>\n      <button\n        type=\"button\"\n        className=\"inline-flex flex-col items-center justify-center px-5 hover:bg-background dark:hover:bg-background group\"\n      >\n        <svg\n          className=\"w-5 h-5 mb-2 text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path d=\"M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z\" />\n        </svg>\n        <span className=\"text-sm text-foreground dark:text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-500\">\n          Profile\n        </span>\n      </button>\n    </div>\n  </header>\n);\n\nexport default MobileNav;\n",
      "type": "registry:ui"
    }
  ]
}