{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-4",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "avatar",
    "badge",
    "button",
    "dropdown-menu",
    "input",
    "navigation-menu",
    "sheet",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/navigation-4.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from \"@/components/ui/navigation-menu\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Sheet, SheetContent, SheetTrigger } from \"@/components/ui/sheet\";\nimport { Input } from \"@/components/ui/input\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport {\n  Cpu,\n  Layers,\n  GitBranch,\n  Terminal,\n  ArrowUpRight,\n  Search,\n  ChevronDown,\n  Menu,\n  User,\n  Settings,\n  LogOut,\n  MoonStar,\n  Bookmark,\n} from \"lucide-react\";\n\nexport function Navigation4() {\n  return (\n    <div className=\"relative w-full border-b border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950 [&_a]:no-underline\">\n      <div className=\"mx-auto flex h-17 max-w-7xl items-center justify-between px-6\">\n        <div className=\"flex items-center gap-6\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"text-primary dark:text-primary flex h-8 w-8 items-center justify-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"h-6 w-6 fill-current\"\n              >\n                <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" />\n              </svg>\n            </div>\n            <span className=\"text-lg font-bold tracking-tight text-neutral-900 lg:hidden dark:text-white\">\n              Watermelon\n            </span>\n          </div>\n\n          <div className=\"hidden lg:block\">\n            <NavigationMenu\n              className={cn(\n                \"static\",\n                \"[&>.absolute]:inset-x-0 [&>.absolute]:top-full [&>.absolute]:w-full\",\n                \"[&_[data-slot=navigation-menu-viewport]]:mt-1 [&_[data-slot=navigation-menu-viewport]]:!w-full\",\n                \"[&_[data-slot=navigation-menu-viewport]]:rounded-none [&_[data-slot=navigation-menu-viewport]]:shadow-none [&_[data-slot=navigation-menu-viewport]]:ring-0\",\n                \"[&_[data-slot=navigation-menu-viewport]]:border-0 [&_[data-slot=navigation-menu-viewport]]:border-b\",\n                \"[&_[data-slot=navigation-menu-viewport]]:border-neutral-200 dark:[&_[data-slot=navigation-menu-viewport]]:border-neutral-800\",\n                \"[&_[data-slot=navigation-menu-viewport]]:bg-white dark:[&_[data-slot=navigation-menu-viewport]]:bg-neutral-950\",\n                \"[&_[data-slot=navigation-menu-viewport]]:transition-all [&_[data-slot=navigation-menu-viewport]]:duration-300 [&_[data-slot=navigation-menu-viewport]]:ease-in-out\",\n                \"[&_[data-slot=navigation-menu-viewport]]:data-open:fade-in-0 [&_[data-slot=navigation-menu-viewport]]:data-closed:fade-out-0\",\n                \"[&_[data-slot=navigation-menu-viewport]]:data-open:zoom-in-100 [&_[data-slot=navigation-menu-viewport]]:data-closed:zoom-out-100\",\n              )}\n            >\n              <NavigationMenuList className=\"gap-6\">\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Features\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem>\n                  <NavigationMenuLink\n                    className=\"flex items-center gap-2 rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50\"\n                    href=\"#\"\n                  >\n                    Developers\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"bg-primary text-primary-foreground hover:bg-primary dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/20 h-5 rounded-full px-2 text-[10px]\"\n                    >\n                      API\n                    </Badge>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n\n                <NavigationMenuItem className=\"gap-5\">\n                  <NavigationMenuTrigger className=\"h-auto rounded-xl bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-all hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 data-[active]:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-50 dark:focus:bg-neutral-800/50 dark:focus:text-neutral-50 dark:data-[active]:bg-neutral-800/50 dark:data-[state=open]:bg-neutral-800/50\">\n                    Solutions\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent className=\"!w-full\">\n                    <div className=\"mx-auto grid max-w-6xl grid-cols-4 gap-6 divide-x px-6 py-8\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"mb-3 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900\">\n                          <Cpu className=\"h-5 w-5 text-neutral-700 dark:text-neutral-300\" />\n                        </div>\n                        <h4 className=\"mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-50\">\n                          Compute Engine\n                        </h4>\n                        <p className=\"mb-3 text-sm tracking-tight text-neutral-500 dark:text-neutral-400\">\n                          Train and deploy models with infinite scale\n                          infrastructure.\n                        </p>\n                        <div className=\"flex flex-wrap gap-2\">\n                          <Button\n                            variant=\"outline\"\n                            className=\"h-7 gap-1.5 rounded-full px-3 text-xs text-neutral-700 dark:text-neutral-300\"\n                          >\n                            <Layers className=\"h-3.5 w-3.5\" /> Pipelines\n                          </Button>\n                          <Button\n                            variant=\"outline\"\n                            className=\"h-7 gap-1.5 rounded-full px-3 text-xs text-neutral-700 dark:text-neutral-300\"\n                          >\n                            <GitBranch className=\"h-3.5 w-3.5\" /> Webhooks\n                          </Button>\n                          <Button\n                            variant=\"outline\"\n                            className=\"h-7 gap-1.5 rounded-full px-3 text-xs text-neutral-700 dark:text-neutral-300\"\n                          >\n                            <Terminal className=\"h-3.5 w-3.5\" /> CLI Tool\n                          </Button>\n                        </div>\n                      </div>\n                      <div className=\"flex flex-col gap-3 pl-6\">\n                        <h4 className=\"mb-1 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                          Use Cases\n                        </h4>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Fraud Detection\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Personalized Search\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Predictive Analytics\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          LLM Gateways\n                        </a>\n                      </div>\n                      <div className=\"flex flex-col gap-3 pl-6\">\n                        <h4 className=\"mb-1 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                          Resources\n                        </h4>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          Documentation\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          API Reference\n                        </a>\n                        <a\n                          href=\"#\"\n                          className=\"text-sm font-medium text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                        >\n                          System Status\n                        </a>\n                      </div>\n                      <div className=\"flex flex-col pl-6\">\n                        <h4 className=\"mb-4 text-xs text-neutral-400 uppercase dark:text-neutral-500\">\n                          Featured\n                        </h4>\n                        <a\n                          href=\"#\"\n                          className=\"group ring-primary/50 relative flex h-full flex-col justify-between overflow-hidden rounded-2xl p-6 no-underline ring transition-all\"\n                        >\n                          <div className=\"from-primary/5 dark:from-primary/10 absolute inset-0 bg-gradient-to-br via-transparent to-transparent group-hover:opacity-100\" />\n                          <div className=\"absolute inset-0 -z-10 bg-neutral-100 dark:bg-neutral-900\" />\n                          <div>\n                            <Badge\n                              variant=\"outline\"\n                              className=\"border-primary text-primary dark:border-primary dark:text-primary mb-3 bg-white dark:bg-neutral-950\"\n                            >\n                              Upcoming Webinar\n                            </Badge>\n                            <h4 className=\"mb-2 text-sm font-semibold text-neutral-900 dark:text-neutral-50\">\n                              Building scalable AI pipelines\n                            </h4>\n                            <p className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n                              Join our engineers for a live teardown of\n                              architecture.\n                            </p>\n                          </div>\n                          <div className=\"text-primary dark:text-primary mt-4 flex items-center text-sm font-medium\">\n                            Register now{\" \"}\n                            <ArrowUpRight className=\"ml-1 size-4 transition-transform group-hover:translate-x-1\" />\n                          </div>\n                        </a>\n                      </div>\n                    </div>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n\n        {/* Search Bar */}\n        <div className=\"mx-8 hidden max-w-md flex-1 lg:block\">\n          <div className=\"group relative\">\n            <Search className=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-neutral-400\" />\n            <Input\n              type=\"text\"\n              placeholder=\"Search components...\"\n              className=\"focus:ring-primary/20 w-full rounded-lg border-neutral-200 bg-neutral-50 pr-4 pl-10 text-sm transition-all focus:ring-2 dark:border-neutral-800 dark:bg-neutral-900\"\n            />\n          </div>\n        </div>\n\n        {/* Right Section */}\n        <div className=\"flex items-center gap-2 md:gap-4\">\n          <div className=\"flex hidden items-center gap-2 lg:block\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"rounded-lg p-0 text-neutral-600 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n            >\n              <MoonStar className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle theme</span>\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"rounded-lg p-0 text-neutral-600 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n            >\n              <Bookmark className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Bookmarks</span>\n            </Button>\n          </div>\n\n          <div className=\"hidden h-6 w-px bg-neutral-200 lg:block dark:bg-neutral-800\" />\n\n          {/* Avatar Section */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                className=\"h-auto rounded-xl p-1 hover:bg-neutral-100 dark:hover:bg-neutral-800/50\"\n              >\n                <div className=\"flex items-center gap-2\">\n                  <Avatar className=\"h-8 w-8 rounded-full border border-neutral-200 dark:border-neutral-800\">\n                    <AvatarImage src=\"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=100&auto=format&fit=crop\" />\n                    <AvatarFallback>JD</AvatarFallback>\n                  </Avatar>\n                  <ChevronDown className=\"h-4 w-4 text-neutral-400\" />\n                </div>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              align=\"end\"\n              className=\"w-56 rounded-xl p-1.5 shadow-xl\"\n            >\n              <DropdownMenuLabel className=\"px-2 py-1.5 text-xs text-neutral-400 uppercase\">\n                Account\n              </DropdownMenuLabel>\n              <DropdownMenuItem className=\"flex items-center gap-2 rounded-lg px-2 py-2 text-sm\">\n                <User className=\"h-4 w-4\" /> Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem className=\"flex items-center gap-2 rounded-lg px-2 py-2 text-sm\">\n                <Settings className=\"h-4 w-4\" /> Settings\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                variant=\"destructive\"\n                className=\"!focus:bg-red-600/10 flex items-center gap-2 rounded-lg px-2 py-2 text-sm\"\n              >\n                <LogOut className=\"h-4 w-4\" /> Logout\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div className=\"text-neutral-700 lg:hidden\">\n            <Sheet>\n              <SheetTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  className=\"h-10 w-10 rounded-xl p-0 text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800\"\n                >\n                  <Menu className=\"h-6 w-6\" />\n                </Button>\n              </SheetTrigger>\n              <SheetContent side=\"right\" className=\"w-full sm:max-w-xs\">\n                <div className=\"flex h-full flex-col overflow-y-auto px-6 py-8\">\n                  <div className=\"mb-6 flex items-center justify-between\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"text-primary dark:text-primary flex h-8 w-8 items-center justify-center\">\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          className=\"h-6 w-6 fill-current\"\n                        >\n                          <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" />\n                        </svg>\n                      </div>\n                      <span className=\"text-xl font-bold tracking-tight text-neutral-900 dark:text-white\">\n                        Watermelon\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Sheet Search */}\n                  <div className=\"relative mb-6\">\n                    <Search className=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-neutral-400\" />\n                    <Input\n                      placeholder=\"Search...\"\n                      className=\"rounded-lg pl-10\"\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1 text-base font-medium\">\n                    <a\n                      href=\"#\"\n                      className=\"hover:text-primary block py-2 text-neutral-900 no-underline transition-colors dark:text-neutral-50\"\n                    >\n                      Features\n                    </a>\n                    <a\n                      href=\"#\"\n                      className=\"hover:text-primary flex items-center justify-between py-2 text-neutral-900 no-underline transition-colors dark:text-neutral-50\"\n                    >\n                      Developers\n                      <Badge\n                        variant=\"secondary\"\n                        className=\"bg-primary text-primary dark:bg-primary/20 dark:text-primary\"\n                      >\n                        API\n                      </Badge>\n                    </a>\n\n                    <Accordion type=\"single\" collapsible className=\"w-full\">\n                      <AccordionItem value=\"solutions\" className=\"border-none\">\n                        <AccordionTrigger className=\"hover:text-primary dark:hover:text-primary justify-between py-2 text-base font-medium text-neutral-900 no-underline transition-colors hover:no-underline dark:text-neutral-50\">\n                          Solutions\n                        </AccordionTrigger>\n                        <AccordionContent className=\"mt-1 ml-2 flex !h-auto flex-col gap-3 border-l border-neutral-200 pb-0 pl-4 dark:border-neutral-800 [&_a]:no-underline\">\n                          <div className=\"flex flex-col gap-2\">\n                            <span className=\"text-xs text-neutral-400 uppercase\">\n                              Infrastructure\n                            </span>\n                            <a\n                              href=\"#\"\n                              className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                            >\n                              Compute Engine\n                            </a>\n                            <a\n                              href=\"#\"\n                              className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                            >\n                              System Status\n                            </a>\n                          </div>\n                          <div className=\"mt-2 flex flex-col gap-2\">\n                            <span className=\"text-xs text-neutral-400 uppercase\">\n                              Use Cases\n                            </span>\n                            <a\n                              href=\"#\"\n                              className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                            >\n                              Fraud Detection\n                            </a>\n                            <a\n                              href=\"#\"\n                              className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                            >\n                              Predictive Analytics\n                            </a>\n                            <a\n                              href=\"#\"\n                              className=\"hover:text-primary dark:hover:text-primary text-sm font-medium tracking-tight text-neutral-600 dark:text-neutral-300\"\n                            >\n                              LLM Gateways\n                            </a>\n                          </div>\n                        </AccordionContent>\n                      </AccordionItem>\n                    </Accordion>\n\n                    <a\n                      href=\"#\"\n                      className=\"hover:text-primary block py-2 text-neutral-900 no-underline transition-colors dark:text-neutral-50\"\n                    >\n                      Pricing\n                    </a>\n                  </div>\n                </div>\n              </SheetContent>\n            </Sheet>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-4.tsx"
    }
  ],
  "type": "registry:ui"
}