{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-nav",
  "type": "registry:block",
  "title": "Floating nav",
  "description": "Floating nav",
  "files": [
    {
      "path": "components/usages/floatingnavusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { FloatingNav } from \"@/registry/open-source/floating-nav\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"h-screen overflow-auto\">\r\n\t\t\t\t<div className=\"h-[200vh] \" />\r\n\t\t\t\t<FloatingNav />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/floatingnavusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { FloatingNav } from \"@/registry/open-source/floating-nav\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"h-screen overflow-auto\">\r\n\t\t\t\t<div className=\"h-[200vh] \" />\r\n\t\t\t\t<FloatingNav />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/floating-nav.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport Link from \"next/link\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { IconHome, IconMessage, IconUser } from \"@tabler/icons-react\";\nimport {\n\tAnimatePresence,\n\tmotion,\n\tuseMotionValueEvent,\n\tuseScroll,\n} from \"motion/react\";\n\n// https://ui.aceternity.com/components/floating-navbar\n\nconst navItemsExample = [\n\t{\n\t\tname: \"Home\",\n\t\tlink: \"/\",\n\t\ticon: <IconHome className=\"h-4 w-4 text-foreground dark:text-foreground\" />,\n\t},\n\t{\n\t\tname: \"About\",\n\t\tlink: \"/about\",\n\t\ticon: <IconUser className=\"h-4 w-4 text-foreground dark:text-foreground\" />,\n\t},\n\t{\n\t\tname: \"Contact\",\n\t\tlink: \"/contact\",\n\t\ticon: (\n\t\t\t<IconMessage className=\"h-4 w-4 text-foreground dark:text-foreground\" />\n\t\t),\n\t},\n];\n\nexport const FloatingNav = ({\n\tnavItems = navItemsExample,\n\tclassName,\n}: {\n\tnavItems: {\n\t\tname: string;\n\t\tlink: string;\n\t\ticon?: React.ReactElement;\n\t}[];\n\tclassName?: string;\n}) => {\n\tconst { scrollYProgress } = useScroll();\n\n\tconst [visible, setVisible] = useState(false);\n\n\tuseMotionValueEvent(scrollYProgress, \"change\", (current) => {\n\t\t// Check if current is not undefined and is a number\n\t\tif (typeof current === \"number\") {\n\t\t\tlet direction = current! - scrollYProgress.getPrevious()!;\n\n\t\t\tif (scrollYProgress.get() < 0.05) {\n\t\t\t\tsetVisible(false);\n\t\t\t} else {\n\t\t\t\tif (direction < 0) {\n\t\t\t\t\tsetVisible(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVisible(false);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t});\n\n\treturn (\n\t\t<AnimatePresence mode=\"wait\">\n\t\t\t<motion.div\n\t\t\t\tinitial={{\n\t\t\t\t\topacity: 1,\n\t\t\t\t\ty: -100,\n\t\t\t\t}}\n\t\t\t\tanimate={{\n\t\t\t\t\ty: visible ? 0 : -100,\n\t\t\t\t\topacity: visible ? 1 : 0,\n\t\t\t\t}}\n\t\t\t\ttransition={{\n\t\t\t\t\tduration: 0.2,\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex max-w-fit  fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/20 rounded-full dark:bg-background bg-background shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-5000 pr-2 pl-8 py-2  items-center justify-center space-x-4\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{navItems.map((navItem: any, idx: number) => (\n\t\t\t\t\t<Link\n\t\t\t\t\t\tkey={`link=${idx}`}\n\t\t\t\t\t\thref={navItem.link}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative dark:text-foreground items-center flex space-x-1 text-foreground dark:hover:text-foreground hover:text-foreground\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"block sm:hidden\">{navItem.icon}</span>\n\t\t\t\t\t\t<span className=\"hidden sm:block text-sm\">\n\t\t\t\t\t\t\t{navItem.name}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Link>\n\t\t\t\t))}\n\t\t\t\t<button className=\"border text-sm font-medium relative border-neutral-200 dark:border-white/20 text-foreground dark:text-foreground px-4 py-2 rounded-full\">\n\t\t\t\t\t<span>Login</span>\n\t\t\t\t\t<span className=\"absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-linear-to-r from-transparent via-blue-500 to-transparent  h-px\" />\n\t\t\t\t</button>\n\t\t\t</motion.div>\n\t\t</AnimatePresence>\n\t);\n};\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"
    }
  ]
}