{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-03",
  "type": "registry:block",
  "dependencies": [
    "next-themes"
  ],
  "registryDependencies": [
    "utils",
    "navigation-menu",
    "button",
    "https://launchmvpfast.com/r/use-is-mac.json",
    "separator",
    "popover"
  ],
  "files": [
    {
      "path": "registry/default/blocks/navbar/navbar-03.tsx",
      "content": "import { buttonVariants } from '@/registry/default/ui/button'\r\nimport {\r\n    NavigationMenu,\r\n    NavigationMenuItem,\r\n    NavigationMenuLink,\r\n    NavigationMenuList,\r\n} from '@/registry/default/ui/navigation-menu'\r\nimport { cn } from '@/lib/utils'\r\nimport { Search } from './search'\r\nimport { Separator } from '@/registry/default/ui/separator'\r\nimport { ModeSwitcher } from './mode-switcher'\r\nimport { MobileNav } from './mobile-nav'\r\n// import Link from 'next/link'\r\n\r\n// Sample navigation links, you can replace these with your actual links\r\n// you can add more categories it will be rendered in mobile nav, but only the first one will be rendered in desktop nav\r\nconst navigationLinks = [\r\n    {\r\n        name: 'Menu',\r\n        items: [\r\n            { href: '#', label: 'Products', active: true },\r\n            { href: '#', label: 'Pricing' },\r\n            { href: '#', label: 'Docs' },\r\n            { href: '#', label: 'About' },\r\n        ],\r\n    },\r\n]\r\n\r\nexport default function Navbar() {\r\n    const Link = 'a' // if using Next.js remove this line. you can use the Link component from 'next/link'\r\n\r\n    return (\r\n        <header className=\"container mx-auto flex h-14 items-center justify-between gap-4\">\r\n            <div className=\"flex flex-1 items-center justify-start gap-2 md:gap-4\">\r\n                <MobileNav nav={navigationLinks} />\r\n\r\n                <Link\r\n                    href=\"#\"\r\n                    className={cn(\r\n                        buttonVariants({ variant: 'ghost', size: 'icon' }),\r\n                        \"dark:hover:bg-accent text-accent-foreground [&_svg:not([class*='size-'])]:size-6\"\r\n                    )}\r\n                >\r\n                    <svg\r\n                        viewBox=\"0 0 40 40\"\r\n                        fill=\"none\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                    >\r\n                        <path\r\n                            d=\"M11.7699 21.8258L7.42207 20.485C5 19.9996 5 20 6.6277 17.875L9.77497 13.9892C10.4003 13.2172 11.3407 12.7687 12.3342 12.7687L19.2668 13.0726M11.7699 21.8258C11.7699 21.8258 12.8773 24.5436 14.1667 25.833C15.4561 27.1223 18.1738 28.2296 18.1738 28.2296M18.1738 28.2296L19.0938 32.0266C19.5 34.5 19.5 34.5 21.6117 33.0063L25.7725 30.2146C26.684 29.603 27.2308 28.5775 27.2308 27.4798L26.927 20.733M26.927 20.733C31.5822 16.4657 34.5802 12.4926 34.9962 6.59335C35.1164 4.8888 35.1377 4.88137 33.4062 5.00345C27.507 5.41937 23.534 8.4174 19.2668 13.0726M11.7699 31.6146C11.7699 33.4841 10.2544 34.9996 8.38495 34.9996H5V31.6146C5 29.7453 6.5155 28.2298 8.38495 28.2298C10.2544 28.2298 11.7699 29.7453 11.7699 31.6146Z\"\r\n                            fill=\"currentColor\"\r\n                        />\r\n                        <path\r\n                            d=\"M12.5 22.9996L11 20.4996C11 20.0996 16 12.9996 20 12.9996C22.1667 14.8329 26.1172 16.4682 27 19.9996C27.5 21.9996 21.5 26.1663 18.5 28.4996L12.5 22.9996Z\"\r\n                            fill=\"currentColor\"\r\n                        />\r\n                    </svg>\r\n                </Link>\r\n\r\n                <NavigationMenu className=\"max-md:hidden\">\r\n                    <NavigationMenuList>\r\n                        {navigationLinks[0].items.map((link, index) => (\r\n                            <NavigationMenuItem key={index}>\r\n                                <NavigationMenuLink\r\n                                    asChild\r\n                                    href={link.href}\r\n                                    data-active={link.active}\r\n                                    className=\"rounded-md px-3 py-1.5 font-medium\"\r\n                                >\r\n                                    <Link>{link.label}</Link>\r\n                                </NavigationMenuLink>\r\n                            </NavigationMenuItem>\r\n                        ))}\r\n                    </NavigationMenuList>\r\n                </NavigationMenu>\r\n            </div>\r\n\r\n            <div className=\"flex items-center justify-end gap-2\">\r\n                <Search className=\"mr-2 hidden sm:flex\" />\r\n\r\n                <Separator\r\n                    orientation=\"vertical\"\r\n                    className=\"hidden data-[orientation=vertical]:h-5 sm:flex\"\r\n                />\r\n\r\n                <Link\r\n                    href=\"#\"\r\n                    className={cn(\r\n                        buttonVariants({ variant: 'ghost', size: 'sm' }),\r\n                        'size-8 cursor-pointer'\r\n                    )}\r\n                >\r\n                    <svg viewBox=\"0 0 438.549 438.549\" fill=\"currentColor\">\r\n                        <path\r\n                            fill=\"currentColor\"\r\n                            d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\r\n                        ></path>\r\n                    </svg>\r\n                </Link>\r\n\r\n                <Separator\r\n                    orientation=\"vertical\"\r\n                    className=\"data-[orientation=vertical]:h-5\"\r\n                />\r\n\r\n                <ModeSwitcher />\r\n            </div>\r\n        </header>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/navbar.tsx"
    },
    {
      "path": "registry/default/blocks/navbar/search.tsx",
      "content": "'use client'\r\n\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport { cn } from '@/lib/utils'\r\nimport { useIsMac } from '@/registry/default/hooks/use-is-mac'\r\n\r\nexport function Search({ className }: React.ComponentProps<'button'>) {\r\n    const isMac = useIsMac()\r\n\r\n    return (\r\n        <Button\r\n            variant=\"secondary\"\r\n            className={cn(\r\n                'bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64',\r\n                className\r\n            )}\r\n        >\r\n            <span className=\"hidden lg:inline-flex\">Search...</span>\r\n            <span className=\"inline-flex lg:hidden\">Search...</span>\r\n            <div className=\"absolute top-1.5 right-1.5 hidden gap-1 sm:flex\">\r\n                <CommandMenuKbd>{isMac ? '⌘' : 'Ctrl'}</CommandMenuKbd>\r\n                <CommandMenuKbd className=\"aspect-square\">K</CommandMenuKbd>\r\n            </div>\r\n        </Button>\r\n    )\r\n}\r\n\r\nfunction CommandMenuKbd({ className, ...props }: React.ComponentProps<'kbd'>) {\r\n    return (\r\n        <kbd\r\n            className={cn(\r\n                \"bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/search.tsx"
    },
    {
      "path": "registry/default/blocks/navbar/mode-switcher.tsx",
      "content": "'use client'\r\n\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport { useTheme } from 'next-themes'\r\nimport * as React from 'react'\r\n\r\nexport function ModeSwitcher() {\r\n    const { setTheme, resolvedTheme } = useTheme()\r\n\r\n    const toggleTheme = React.useCallback(() => {\r\n        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')\r\n    }, [resolvedTheme, setTheme])\r\n\r\n    return (\r\n        <Button\r\n            variant=\"ghost\"\r\n            size=\"icon\"\r\n            className=\"group/toggle extend-touch-target size-8 cursor-pointer\"\r\n            onClick={toggleTheme}\r\n            title=\"Toggle theme\"\r\n        >\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                strokeWidth=\"2\"\r\n                strokeLinecap=\"round\"\r\n                strokeLinejoin=\"round\"\r\n                className=\"size-4.5\"\r\n            >\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n                <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\r\n                <path d=\"M12 3l0 18\" />\r\n                <path d=\"M12 9l4.65 -4.65\" />\r\n                <path d=\"M12 14.3l7.37 -7.37\" />\r\n                <path d=\"M12 19.6l8.85 -8.85\" />\r\n            </svg>\r\n            <span className=\"sr-only\">Toggle theme</span>\r\n        </Button>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/mode-switcher.tsx"
    },
    {
      "path": "registry/default/blocks/navbar/mobile-nav.tsx",
      "content": "'use client'\r\n\r\nimport React from 'react'\r\nimport {\r\n    Popover,\r\n    PopoverContent,\r\n    PopoverTrigger,\r\n} from '@/registry/default/ui/popover'\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport { cn } from '@/lib/utils'\r\n// import Link from 'next/link'\r\n\r\ntype MobileNavProps = {\r\n    nav: {\r\n        name: string\r\n        items: {\r\n            label: string\r\n            href: string\r\n        }[]\r\n    }[]\r\n}\r\n\r\nexport function MobileNav({ nav }: MobileNavProps) {\r\n    const Link = 'a' // if using Next.js remove this line. you can use the Link component from 'next/link'\r\n\r\n    const [open, setOpen] = React.useState(false)\r\n\r\n    return (\r\n        <Popover open={open} onOpenChange={setOpen} modal={true}>\r\n            <PopoverTrigger asChild>\r\n                <Button\r\n                    variant=\"ghost\"\r\n                    size=\"icon\"\r\n                    className={cn(\r\n                        'extend-touch-target block size-8 touch-manipulation items-center justify-start gap-2.5 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent md:hidden dark:hover:bg-transparent'\r\n                    )}\r\n                >\r\n                    <div className=\"relative flex items-center justify-center\">\r\n                        <div className=\"relative size-4\">\r\n                            <span\r\n                                className={cn(\r\n                                    'bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100',\r\n                                    open ? 'top-[0.4rem] -rotate-45' : 'top-1'\r\n                                )}\r\n                            />\r\n                            <span\r\n                                className={cn(\r\n                                    'bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100',\r\n                                    open ? 'top-[0.4rem] rotate-45' : 'top-2.5'\r\n                                )}\r\n                            />\r\n                        </div>\r\n                        <span className=\"sr-only\">Toggle Menu</span>\r\n                    </div>\r\n                </Button>\r\n            </PopoverTrigger>\r\n            <PopoverContent\r\n                className=\"bg-background/90 no-scrollbar h-(--radix-popover-content-available-height) w-(--radix-popover-content-available-width) overflow-y-auto rounded-none border-none p-0 shadow-none backdrop-blur duration-100\"\r\n                align=\"start\"\r\n                side=\"bottom\"\r\n                alignOffset={-16}\r\n                sideOffset={4}\r\n            >\r\n                <div className=\"flex flex-col gap-12 overflow-auto px-6 py-6\">\r\n                    {nav.map((category, index) => (\r\n                        <div className=\"flex flex-col gap-4\" key={index}>\r\n                            <p className=\"text-muted-foreground text-sm font-medium\">\r\n                                {category.name}\r\n                            </p>\r\n                            <div className=\"flex flex-col gap-3\">\r\n                                {category.items.map((item, index) => (\r\n                                    <Link\r\n                                        key={index}\r\n                                        href={item.href as string}\r\n                                        className=\"text-2xl font-medium\"\r\n                                        onClick={() => setOpen(false)}\r\n                                    >\r\n                                        {item.label}\r\n                                    </Link>\r\n                                ))}\r\n                            </div>\r\n                        </div>\r\n                    ))}\r\n                </div>\r\n            </PopoverContent>\r\n        </Popover>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/mobile-nav.tsx"
    }
  ]
}