{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-7",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "dropdown-menu",
    "popover",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/navigation-7.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\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  Cpu,\n  Layers,\n  GitBranch,\n  Terminal,\n  User,\n  Menu,\n  X,\n  ArrowUpRight,\n  Search,\n  Settings,\n  LogOut,\n  ChevronDown,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function Navigation7() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div className=\"relative w-full py-10\">\n      <div className=\"mx-auto flex max-w-7xl items-center justify-center px-6\">\n        {/* Navigation Wrapper with Anchor */}\n        <Popover open={isOpen} onOpenChange={setIsOpen}>\n          <PopoverAnchor asChild>\n            {/* Floating Navbar Pill */}\n            <div className=\"flex h-16 w-full items-center justify-between gap-2 rounded-full border border-neutral-200 bg-white pr-4 shadow-lg md:w-5xl lg:w-4xl dark:border-neutral-800 dark:bg-neutral-950\">\n              <div className=\"flex items-center gap-2 pl-4\">\n                {/* Toggle Button */}\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-9 w-9 rounded-xl text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800\"\n                  >\n                    {isOpen ? (\n                      <X className=\"size-5\" />\n                    ) : (\n                      <Menu className=\"size-5\" />\n                    )}\n                    <span className=\"sr-only\">Toggle menu</span>\n                  </Button>\n                </PopoverTrigger>\n\n                {/* Logo Section */}\n                <div className=\"flex items-center gap-1.5\">\n                  <div className=\"flex h-8 w-8 items-center justify-center text-primary dark:text-primary\">\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=\"size-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 dark:text-white\">\n                    Watermelon\n                  </span>\n                </div>\n              </div>\n\n              {/* Action Icons Section */}\n              <div className=\"flex items-center gap-2\">\n                {/* Search Icon - Desktop Only */}\n                <div className=\"hidden lg:block\">\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-9 w-9 rounded-full text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n                  >\n                    <Search className=\"size-4.5\" />\n                  </Button>\n                </div>\n\n                {/* Avatar Section - Visible Everywhere */}\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button\n                      variant=\"ghost\"\n                      className=\"h-auto rounded-full 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=\"hidden h-4 w-4 text-neutral-400 lg:block\" />\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 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800\">\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 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800\">\n                      <Settings className=\"h-4 w-4\" /> Settings\n                    </DropdownMenuItem>\n                    <DropdownMenuSeparator className=\"my-1 bg-neutral-100 dark:bg-neutral-800\" />\n                    <DropdownMenuItem\n                      variant=\"destructive\"\n                      className=\"flex items-center gap-2 rounded-lg px-2 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20\"\n                    >\n                      <LogOut className=\"h-4 w-4\" /> Logout\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </div>\n          </PopoverAnchor>\n\n          <PopoverContent\n            align=\"center\"\n            sideOffset={20}\n            className={cn(\n              \"max-h-[82dvh] w-xs max-w-none overflow-y-auto overscroll-contain rounded-2xl border border-neutral-200 bg-white p-0 shadow-none ring-0 sm:w-2xl dark:border-neutral-800 dark:bg-neutral-950\",\n              \"lg:w-[calc(100vw-3rem)] lg:max-w-5xl lg:rounded-[2.5rem] lg:shadow-lg\",\n            )}\n          >\n            <div className=\"mx-auto grid w-full max-w-none grid-cols-1 gap-0 px-8 py-6 lg:max-w-5xl lg:grid-cols-4 lg:px-10 lg:py-10 dark:divide-neutral-900\">\n              {/* Column 1 */}\n              <div className=\"flex flex-col pb-8 lg:pr-8 lg:pb-0\">\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 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\" />\n                    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\" />\n                    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\" />\n                    CLI Tool\n                  </Button>\n                </div>\n              </div>\n\n              {/* Column 2 */}\n              <div className=\"flex flex-col gap-3 border-t border-neutral-100 py-8 lg:border-t-0 lg:border-l lg:py-0 lg:pl-8 dark:border-neutral-900\">\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 tracking-tight text-neutral-500 transition-colors 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 tracking-tight text-neutral-500 transition-colors 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 tracking-tight text-neutral-500 transition-colors 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 tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                >\n                  LLM Gateways\n                </a>\n              </div>\n\n              {/* Column 3 */}\n              <div className=\"flex flex-col gap-3 border-t border-neutral-100 py-8 lg:border-t-0 lg:border-l lg:py-0 lg:pl-8 dark:border-neutral-900\">\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 tracking-tight text-neutral-500 transition-colors 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 tracking-tight text-neutral-500 transition-colors 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 tracking-tight text-neutral-500 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-50\"\n                >\n                  System Status\n                </a>\n              </div>\n\n              {/* Column 4 */}\n              <div className=\"flex flex-col border-t border-neutral-100 py-8 lg:border-t-0 lg:border-l lg:py-0 lg:pl-8 dark:border-neutral-900\">\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 relative flex h-full min-h-[160px] flex-col justify-between overflow-hidden rounded-2xl p-6 ring ring-primary/50 transition-all\"\n                >\n                  <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent group-hover:opacity-100 dark:from-primary/10\" />\n                  <div className=\"absolute inset-0 -z-10 bg-neutral-100 dark:bg-neutral-900\" />\n\n                  <div>\n                    <Badge\n                      variant=\"outline\"\n                      className=\"mb-3 border-primary bg-white text-primary dark:border-primary dark:bg-neutral-950 dark:text-primary\"\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 tracking-tight text-neutral-600 dark:text-neutral-400\">\n                      Join our engineers for a live teardown of the new Compute\n                      Engine architecture.\n                    </p>\n                  </div>\n\n                  <div className=\"mt-4 flex items-center text-sm font-medium text-primary dark:text-primary\">\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\n            {/* Mobile Button Collection */}\n            <div className=\"px-6 pb-8 lg:hidden\">\n              <Button className=\"w-full rounded-xl bg-primary py-6 text-white shadow-lg shadow-primary/20 hover:bg-primary dark:bg-primary dark:hover:bg-primary\">\n                Get started\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/navigation-7.tsx"
    }
  ],
  "type": "registry:ui"
}