{/* Desktop Navigation */}

{/* Mobile Navigation */} setIsMobileMenuOpen(!isMobileMenuOpen)} /> setIsMobileMenuOpen(false)} > {navItems.map((item, idx) => ( setIsMobileMenuOpen(false)} className="relative text-neutral-600 dark:text-neutral-300" > {item.name} ))}

setIsMobileMenuOpen(false)} variant="primary" className="w-full" > Login setIsMobileMenuOpen(false)} variant="primary" className="w-full" > Book a call

{/* Navbar */}

); } const DummyContent = () => { return (

Check the navbar at the top of the container

For demo purpose we have kept the position as{" "} Sticky. Keep in mind that this component is fixed and will not move when scrolling.

{[ { id: 1, title: "The", width: "md:col-span-1", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 2, title: "First", width: "md:col-span-2", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 3, title: "Rule", width: "md:col-span-1", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 4, title: "Of", width: "md:col-span-3", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 5, title: "F", width: "md:col-span-1", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 6, title: "Club", width: "md:col-span-2", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 7, title: "Is", width: "md:col-span-2", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 8, title: "You", width: "md:col-span-1", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 9, title: "Do NOT TALK about", width: "md:col-span-2", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, { id: 10, title: "F Club", width: "md:col-span-1", height: "h-60", bg: "bg-neutral-100 dark:bg-neutral-800", }, ].map((box) => (

{box.title}

))}

); }; `,__rawStringJsx__:`"use client"; import { Navbar, NavBody, NavItems, MobileNav, NavbarLogo, NavbarButton, MobileNavHeader, MobileNavToggle, MobileNavMenu, } from "@/components/ui/resizable-navbar"; import { useState } from "react"; export function NavbarDemo() { const navItems = [ { name: "Features", link: "#features", }, { name: "Pricing", link: "#pricing", }, { name: "Contact", link: "#contact", }, ]; const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); return (

{/* Desktop Navigation */}

{/* Mobile Navigation */} setIsMobileMenuOpen(!isMobileMenuOpen)} /> setIsMobileMenuOpen(false)}> {navItems.map((item, idx) => ( setIsMobileMenuOpen(false)} className="relative text-neutral-600 dark:text-neutral-300"> {item.name} ))}

setIsMobileMenuOpen(false)} variant="primary" className="w-full"> Login setIsMobileMenuOpen(false)} variant="primary" className="w-full"> Book a call

{/* Navbar */}

); } const DummyContent = () => { return (

Check the navbar at the top of the container

For demo purpose we have kept the position as{" "} Sticky. Keep in mind that this component is fixed and will not move when scrolling.

{box.title}

))}

); }; `,__src__:"/src/registry/default/example/resizable-navbar-demo.tsx",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Navbar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavBody"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavItems"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNav"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavbarLogo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavbarButton"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNavHeader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNavToggle"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNavMenu"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/resizable-navbar"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" NavbarDemo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" navItems"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Features"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" link"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#features"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Pricing"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" link"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#pricing"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Contact"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" link"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#contact"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ];"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setIsMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative w-full"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Navbar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/* Desktop Navigation */"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavBody"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavbarLogo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavItems"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" items"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"navItems"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex items-center gap-4"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavbarButton"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"secondary"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"Login"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavbarButton"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"primary"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"Book a call"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/* Mobile Navigation */"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MobileNav"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MobileNavHeader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavbarLogo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MobileNavToggle"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"!"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MobileNavMenu"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClose"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"navItems"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"item"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"a"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`mobile-link-"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"link"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative text-neutral-600 dark:text-neutral-300"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"block"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"name"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ))}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex w-full flex-col gap-4"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavbarButton"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"primary"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"w-full"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Login"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"NavbarButton"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsMobileMenuOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"primary"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"w-full"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Book a call"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DummyContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/* Navbar */"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DummyContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"container mx-auto p-8 pt-24"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mb-4 text-center text-3xl font-bold"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Check the navbar at the top of the container"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mb-10 text-center text-sm text-zinc-500"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" For demo purpose we have kept the position as"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'" "'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"font-medium"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"Sticky"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:". Keep in mind that this"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" component is "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"font-medium"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"fixed"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" and will not"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" move when scrolling."})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"grid grid-cols-1 gap-4 md:grid-cols-4"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {["})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "The"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-1"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "First"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 3"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Rule"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-1"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 4"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Of"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-3"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 5"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "F"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-1"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 6"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Club"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 7"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Is"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 8"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "You"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-1"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 9"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Do NOT TALK about"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 10"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "F Club"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "md:col-span-1"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "h-60"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-neutral-100 dark:bg-neutral-800"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ]."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"box"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"box"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"id"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"box"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"box"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"box"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"bg"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" flex items-center justify-center rounded-lg p-4 shadow-sm`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-xl font-medium"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"box"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ))}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})}),` `,(0,i.jsxs)(e.h2,{id:"installation",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,i.jsxs)(t,{defaultValue:"manual",children:[(0,i.jsxs)(b,{children:[(0,i.jsx)(o,{value:"cli",children:"CLI"}),(0,i.jsx)(o,{value:"manual",children:"Manual"})]}),(0,i.jsx)(c,{value:"cli",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(a,{children:"Run the following command"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/resizable-navbar.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/resizable-navbar.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/resizable-navbar.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/resizable-navbar.json `,__bunCommand__:`bun x --bun shadcn@latest add https://ui.aceternity.com/registry/resizable-navbar.json `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" https://ui.aceternity.com/registry/resizable-navbar.json"})]})})})})]})}),(0,i.jsx)(c,{value:"manual",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(a,{children:"Install dependencies"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge @tabler/icons-react `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" @tabler/icons-react"})]})})})}),(0,i.jsx)(a,{children:"Add util file"}),(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,i.jsx)(a,{children:"Copy the source code"}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.code,{children:"components/ui/resizable-navbar.tsx"})}),(0,i.jsx)(n,{name:"resizable-navbar",children:(0,i.jsx)(e.figure,{__src__:"/src/registry/default/ui/resizable-navbar.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import { IconMenu2, IconX } from "@tabler/icons-react"; import { motion, AnimatePresence, useScroll, useMotionValueEvent, } from "motion/react"; import React, { useRef, useState } from "react"; interface NavbarProps { children: React.ReactNode; className?: string; } interface NavBodyProps { children: React.ReactNode; className?: string; visible?: boolean; } interface NavItemsProps { items: { name: string; link: string; }[]; className?: string; onItemClick?: () => void; } interface MobileNavProps { children: React.ReactNode; className?: string; visible?: boolean; } interface MobileNavHeaderProps { children: React.ReactNode; className?: string; } interface MobileNavMenuProps { children: React.ReactNode; className?: string; isOpen: boolean; onClose: () => void; } export const Navbar = ({ children, className }: NavbarProps) => { const ref = useRef(null); const { scrollY } = useScroll({ target: ref, offset: ["start start", "end start"], }); const [visible, setVisible] = useState(false); useMotionValueEvent(scrollY, "change", (latest) => { if (latest > 100) { setVisible(true); } else { setVisible(false); } }); return ( {React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement( child as React.ReactElement<{ visible?: boolean }>, { visible }, ) : child, )} ); }; export const NavBody = ({ children, className, visible }: NavBodyProps) => { return ( ); }; export const NavItems = ({ items, className, onItemClick }: NavItemsProps) => { const [hovered, setHovered] = useState(null); return ( setHovered(null)} className={cn( "absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2", className, )} > {items.map((item, idx) => ( setHovered(idx)} onClick={onItemClick} className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300" key={\`link-\${idx}\`} href={item.link} > {hovered === idx && ( )} {item.name} ))} ); }; export const MobileNav = ({ children, className, visible }: MobileNavProps) => { return ( {children} ); }; export const MobileNavHeader = ({ children, className, }: MobileNavHeaderProps) => { return (

{children}

); }; export const MobileNavMenu = ({ children, className, isOpen, onClose, }: MobileNavMenuProps) => { return ( {isOpen && ( {children} )} ); }; export const MobileNavToggle = ({ isOpen, onClick, }: { isOpen: boolean; onClick: () => void; }) => { return isOpen ? ( ) : ( ); }; export const NavbarLogo = () => { return (

Startup ); }; export const NavbarButton = ({ href, as: Tag = "a", children, className, variant = "primary", ...props }: { href?: string; as?: React.ElementType; children: React.ReactNode; className?: string; variant?: "primary" | "secondary" | "dark" | "gradient"; } & ( | React.ComponentPropsWithoutRef<"a"> | React.ComponentPropsWithoutRef<"button"> )) => { const baseStyles = "px-4 py-2 rounded-md bg-white button bg-white text-black text-sm font-bold relative cursor-pointer hover:-translate-y-0.5 transition duration-200 inline-block text-center"; const variantStyles = { primary: "shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]", secondary: "bg-transparent shadow-none dark:text-white", dark: "bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]", gradient: "bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]", }; return ( {children} ); }; `,__rawStringJsx__:`"use client";; import { cn } from "@/lib/utils"; import { IconMenu2, IconX } from "@tabler/icons-react"; import { motion, AnimatePresence, useScroll, useMotionValueEvent, } from "motion/react"; import React, { useRef, useState } from "react"; export const Navbar = ({ children, className }) => { const ref = useRef(null); const { scrollY } = useScroll({ target: ref, offset: ["start start", "end start"], }); const [visible, setVisible] = useState(false); useMotionValueEvent(scrollY, "change", (latest) => { if (latest > 100) { setVisible(true); } else { setVisible(false); } }); return ( {React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { visible }) : child)} ); }; export const NavBody = ({ children, className, visible }) => { return ( ); }; export const NavItems = ({ items, className, onItemClick }) => { const [hovered, setHovered] = useState(null); return ( setHovered(null)} className={cn( "absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2", className )}> {items.map((item, idx) => ( setHovered(idx)} onClick={onItemClick} className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300" key={\`link-\${idx}\`} href={item.link}> {hovered === idx && ( )} {item.name} ))} ); }; export const MobileNav = ({ children, className, visible }) => { return ( {children} ); }; export const MobileNavHeader = ({ children, className }) => { return (

{children}

); }; export const MobileNavMenu = ({ children, className, isOpen, onClose }) => { return ( {isOpen && ( {children} )} ); }; export const MobileNavToggle = ({ isOpen, onClick }) => { return isOpen ? ( ) : ( ); }; export const NavbarLogo = () => { return (

Startup ); }; export const NavbarButton = ({ href, as: Tag = "a", children, className, variant = "primary", ...props }) => { const baseStyles = "px-4 py-2 rounded-md bg-white button bg-white text-black text-sm font-bold relative cursor-pointer hover:-translate-y-0.5 transition duration-200 inline-block text-center"; const variantStyles = { primary: "shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]", secondary: "bg-transparent shadow-none dark:text-white", dark: "bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]", gradient: "bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]", }; return ( {children} ); }; `,__src__:"/src/registry/default/ui/resizable-navbar.tsx",__style__:"default",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" IconMenu2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" IconX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@tabler/icons-react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" AnimatePresence"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useScroll"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useMotionValueEvent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "motion/react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"interface"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" NavbarProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"interface"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" NavBodyProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"interface"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" NavItemsProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" items"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" link"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }[];"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" onItemClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" void"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"interface"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" MobileNavProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"interface"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" MobileNavHeaderProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"interface"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" MobileNavMenuProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" onClose"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" void"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Navbar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" NavbarProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" scrollY"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useScroll"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" target"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" offset"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"start start"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "end start"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setVisible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValueEvent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"scrollY"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "change"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"latest"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"latest"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" >"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 100"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setVisible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" else"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setVisible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // IMPORTANT: Change this to class of `fixed` if you want the navbar to be fixed"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"sticky inset-x-0 top-20 z-40 w-full"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"Children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"child"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"isValidElement"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"child"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cloneElement"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" child"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" as"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactElement"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }>,"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" child"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavBody"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" NavBodyProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" backdropFilter"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "blur(10px)"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" boxShadow"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "40%"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "100%"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 20"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" transition"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" type"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "spring"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" stiffness"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 200"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" damping"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 50"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" minWidth"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "800px"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "relative z-[60] mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full bg-transparent px-4 py-2 lg:flex dark:bg-transparent"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-white/80 dark:bg-neutral-950/80"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavItems"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" items"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" onItemClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" NavItemsProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"hovered"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setHovered"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseLeave"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setHovered"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"items"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"item"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"a"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseEnter"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setHovered"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"onItemClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative px-4 py-2 text-neutral-600 dark:text-neutral-300"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`link-"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"link"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"hovered"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ==="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" layoutId"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"hovered"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"absolute inset-0 h-full w-full rounded-full bg-gray-100 dark:bg-neutral-800"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-20"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"item"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"name"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ))}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNav"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" MobileNavProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" backdropFilter"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "blur(10px)"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" boxShadow"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "90%"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "100%"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" paddingRight"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "12px"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0px"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" paddingLeft"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "12px"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0px"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" borderRadius"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "4px"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "2rem"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 20"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" transition"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" type"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "spring"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" stiffness"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 200"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" damping"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 50"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "relative z-50 mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between bg-transparent px-0 py-2 lg:hidden"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" visible"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-white/80 dark:bg-neutral-950/80"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNavHeader"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" MobileNavHeaderProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "flex w-full flex-row items-center justify-between"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNavMenu"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" onClose"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" MobileNavMenuProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"AnimatePresence"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" exit"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute inset-x-0 top-16 z-50 flex w-full flex-col items-start justify-start gap-4 rounded-lg bg-white px-4 py-8 shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset] dark:bg-neutral-950"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" MobileNavToggle"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" void"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" isOpen"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"IconX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-black dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"IconMenu2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-black dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavbarLogo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"a"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"#"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-black"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"https://assets.aceternity.com/logo-dark.png"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"logo"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"30"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"30"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"font-medium text-black dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"Startup"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" NavbarButton"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" as"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Tag"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "a"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "primary"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"props"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" as"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ElementType"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "primary"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "secondary"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "dark"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "gradient"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" &"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ComponentPropsWithoutRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"a"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ComponentPropsWithoutRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"button"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"))"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" baseStyles"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "px-4 py-2 rounded-md bg-white button bg-white text-black text-sm font-bold relative cursor-pointer hover:-translate-y-0.5 transition duration-200 inline-block text-center"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" variantStyles"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" primary"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" secondary"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-transparent shadow-none dark:text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" dark"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" gradient"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Tag"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"href"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ||"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:" undefined"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"baseStyles"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" variantStyles"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"variant"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"props"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,i.jsxs)(e.h2,{id:"props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,i.jsxs)(e.h2,{id:"resizable-navbar-props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#resizable-navbar-props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Resizable Navbar Props"]}),` `,(0,i.jsxs)(e.h3,{id:"navbar",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#navbar",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Navbar"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Child elements to render inside the navbar"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the navbar"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"navbody",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#navbody",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"NavBody"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Child elements to render inside the nav body"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the nav body"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"visible"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"false"}),(0,i.jsx)(e.td,{children:"Controls the visibility state of the nav body"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"navitems",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#navitems",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"NavItems"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"items"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"Array<{ name: string, link: string }>"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Array of navigation items with name and link"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the nav items"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"onItemClick"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"() => void"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Callback function when a nav item is clicked"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"mobilenav",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#mobilenav",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"MobileNav"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Child elements to render inside the mobile nav"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the mobile nav"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"visible"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"false"}),(0,i.jsx)(e.td,{children:"Controls the visibility state of the mobile nav"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"mobilenavheader",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#mobilenavheader",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"MobileNavHeader"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Child elements to render inside the mobile nav header"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the mobile nav header"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"mobilenavmenu",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#mobilenavmenu",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"MobileNavMenu"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Child elements to render inside the mobile nav menu"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the mobile nav menu"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"isOpen"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Controls whether the mobile menu is open"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"onClose"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"() => void"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Callback function when the mobile menu is closed"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"mobilenavtoggle",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#mobilenavtoggle",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"MobileNavToggle"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"isOpen"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Controls whether the mobile menu is open"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"onClick"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"() => void"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Callback function when the toggle is clicked"})]})]})]}),` `,(0,i.jsxs)(e.h3,{id:"navbarbutton",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#navbarbutton",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"NavbarButton"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"href"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"URL for the button link"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"as"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ElementType"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:'"a"'})}),(0,i.jsx)(e.td,{children:"HTML element type to render (a or button)"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"children"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Child elements to render inside the button"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"className"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the button"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:"variant"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:'"primary" | "secondary" | "dark" | "gradient"'})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:'"primary"'})}),(0,i.jsx)(e.td,{children:"Visual style variant of the button"})]})]})]})]})}function D(d={}){let{wrapper:e}=d.components||{};return e?(0,i.jsx)(e,{...d,children:(0,i.jsx)(y,{...d})}):y(d)}function s(d,e){throw new Error("Expected "+(e?"component":"object")+" `"+d+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(N);})(); ;return Component;

Best Free Navigation Components for your Tailwind CSS and React project

Aceternity UI