{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "curved-navbar",
  "type": "registry:block",
  "title": "Curved navbar",
  "description": "Curved navbar",
  "files": [
    {
      "path": "components/usages/curvednavbarusage.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport CurvedNavbar from \"@/registry/open-source/curved-navbar\";\nimport { AnimatePresence } from \"motion/react\";\n\nexport default function Usage() {\n\tconst [isActive, setIsActive] = useState(false);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetIsActive(!isActive);\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={`w-20 h-20 rounded-full flex flex-col items-center justify-center`}\n\t\t\t\t>\n\t\t\t\t\topen curve nav\n\t\t\t\t</div>\n\n\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t{isActive && (\n\t\t\t\t\t\t<CurvedNavbar isActive={isActive} setIsActive={setIsActive} />\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t</>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/curvednavbarusage.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport CurvedNavbar from \"@/registry/open-source/curved-navbar\";\nimport { AnimatePresence } from \"motion/react\";\n\nexport default function Usage() {\n\tconst [isActive, setIsActive] = useState(false);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetIsActive(!isActive);\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={`w-20 h-20 rounded-full flex flex-col items-center justify-center`}\n\t\t\t\t>\n\t\t\t\t\topen curve nav\n\t\t\t\t</div>\n\n\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t{isActive && (\n\t\t\t\t\t\t<CurvedNavbar isActive={isActive} setIsActive={setIsActive} />\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t</>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/curved-navbar.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\n\nimport { motion } from \"motion/react\";\nimport { IoClose } from \"react-icons/io5\";\n\n// Credit:\n// https://www.sparkui.site/components/curved-navbar\n\nconst navItems = [\n\t{\n\t\ttitle: \"Home\",\n\t\thref: \"/\",\n\t},\n\t{\n\t\ttitle: \"Work\",\n\t\thref: \"/work\",\n\t},\n\t{\n\t\ttitle: \"About\",\n\t\thref: \"/about\",\n\t},\n\t{\n\t\ttitle: \"Contact\",\n\t\thref: \"/contact\",\n\t},\n];\nconst menuSlide = {\n\tinitial: { x: \"calc(100% + 100px)\" },\n\tenter: { x: \"0\", transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] } },\n\texit: {\n\t\tx: \"calc(100% + 100px)\",\n\t\ttransition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] },\n\t},\n};\nconst slide = {\n\tinitial: { x: 80 },\n\tenter: (i) => ({\n\t\tx: 0,\n\t\ttransition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.05 * i },\n\t}),\n\texit: (i) => ({\n\t\tx: 80,\n\t\ttransition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.05 * i },\n\t}),\n};\nconst scale = {\n\topen: { scale: 1, transition: { duration: 0.3 } },\n\tclosed: { scale: 0, transition: { duration: 0.4 } },\n};\nfunction Curve() {\n\tconst initialPath = `M100 0 L200 0 L200 ${window.innerHeight} L100 ${\n\t\twindow.innerHeight\n\t} Q-100 ${window.innerHeight / 2} 100 0`;\n\tconst targetPath = `M100 0 L200 0 L200 ${window.innerHeight} L100 ${\n\t\twindow.innerHeight\n\t} Q100 ${window.innerHeight / 2} 100 0`;\n\n\tconst curve = {\n\t\tinitial: {\n\t\t\td: initialPath,\n\t\t},\n\t\tenter: {\n\t\t\td: targetPath,\n\t\t\ttransition: { duration: 1, ease: [0.76, 0, 0.24, 1] },\n\t\t},\n\t\texit: {\n\t\t\td: initialPath,\n\t\t\ttransition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] },\n\t\t},\n\t};\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={`absolute top-0 -left-[99px] w-[100px] stroke-none h-full fill-[rgb(255,224,69)]`}\n\t\t>\n\t\t\t<motion.path\n\t\t\t\tvariants={curve}\n\t\t\t\tinitial=\"initial\"\n\t\t\t\tanimate=\"enter\"\n\t\t\t\texit=\"exit\"\n\t\t\t></motion.path>\n\t\t</svg>\n\t);\n}\nfunction Footer() {\n\treturn (\n\t\t<div className={`flex w-full text-sm justify-between`}>\n\t\t\t<a>Link 1</a>\n\t\t\t<a>Link 2</a>\n\t\t\t<a>Link 3</a>\n\t\t\t<a>Link 4</a>\n\t\t</div>\n\t);\n}\nfunction NavLink({ data, isActive, setSelectedIndicator }) {\n\tconst { title, href, index } = data;\n\n\treturn (\n\t\t<motion.div\n\t\t\tclassName={`relative flex items-center`}\n\t\t\tonMouseEnter={() => {\n\t\t\t\tsetSelectedIndicator(href);\n\t\t\t}}\n\t\t\tcustom={index}\n\t\t\tvariants={slide}\n\t\t\tinitial=\"initial\"\n\t\t\tanimate=\"enter\"\n\t\t\texit=\"exit\"\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tvariants={scale}\n\t\t\t\tanimate={isActive ? \"open\" : \"closed\"}\n\t\t\t\tclassName={`w-2.5 h-2.5 bg-background rounded-full absolute -left-8`}\n\t\t\t></motion.div>\n\t\t\t<Link href={href} className=\"uppercase font-black\">\n\t\t\t\t{title}\n\t\t\t</Link>\n\t\t</motion.div>\n\t);\n}\nexport default function CurvedNavbar({ isActive, setIsActive }) {\n\tconst pathname = usePathname();\n\tconst [selectedIndicator, setSelectedIndicator] = useState(pathname);\n\n\treturn (\n\t\t<motion.div\n\t\t\tvariants={menuSlide}\n\t\t\tinitial=\"initial\"\n\t\t\tanimate=\"enter\"\n\t\t\texit=\"exit\"\n\t\t\tclassName={`h-screen w-screen max-w-(--breakpoint-sm) fixed right-0 top-0 text-foreground bg-[rgb(255,224,69)] z-10`}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"w-full flex justify-end text-3xl p-4\"\n\t\t\t\tonClick={() => setIsActive(false)}\n\t\t\t>\n\t\t\t\t<IoClose className=\"text-3xl\" />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={`styles.body h-full p-24 flex flex-col justify-between`}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\t\tsetSelectedIndicator(pathname);\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={`flex flex-col text-5xl gap-3 mt-20`}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`text-foreground border-b border-gray-800 uppercase text-sm mb-10`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>Brand Logo</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t{navItems.map((data, index) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\tkey={index + \"curved-nav\"}\n\t\t\t\t\t\t\t\tdata={{ ...data, index }}\n\t\t\t\t\t\t\t\tisActive={selectedIndicator == data.href}\n\t\t\t\t\t\t\t\tsetSelectedIndicator={setSelectedIndicator}\n\t\t\t\t\t\t\t></NavLink>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t\t<Footer />\n\t\t\t</div>\n\t\t\t<Curve />\n\t\t</motion.div>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}