love-ui 1.2.12 → 1.2.14

package/public/r/comp-581.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-581",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-581.tsx",
+      "content": "import InfoMenu from \"@/registry/building-blocks/default/components/navbar-components/info-menu\"\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport NotificationMenu from \"@/registry/building-blocks/default/components/navbar-components/notification-menu\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n]\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem key={index} className=\"w-full\">\n                      <NavigationMenuLink href={link.href} className=\"py-1.5\">\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem key={index}>\n                    <NavigationMenuLink\n                      href={link.href}\n                      className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            {/* Info menu */}\n            <InfoMenu />\n            {/* Notification */}\n            <NotificationMenu />\n          </div>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/info-menu.tsx",
+      "content": "import {\n  BookIcon,\n  InfoIcon,\n  LifeBuoyIcon,\n  MessageCircleMoreIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function InfoMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 rounded-full shadow-none\"\n          aria-label=\"Open edit menu\"\n        >\n          <InfoIcon\n            className=\"text-muted-foreground\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"pb-2\">\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\n        <DropdownMenuItem\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n          asChild\n        >\n          <a href=\"#\">\n            <BookIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            Documentation\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n          asChild\n        >\n          <a href=\"#\">\n            <LifeBuoyIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            Support\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n          asChild\n        >\n          <a href=\"#\">\n            <MessageCircleMoreIcon\n              size={16}\n              className=\"opacity-60\"\n              aria-hidden=\"true\"\n            />\n            Contact us\n          </a>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/notification-menu.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst initialNotifications = [\n  {\n    id: 1,\n    user: \"Connor Love\",\n    action: \"requested review on\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 2,\n    user: \"Nathan Wickersham\",\n    action: \"shared\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 3,\n    user: \"Ian Shroeter\",\n    action: \"assigned you to\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n  },\n  {\n    id: 4,\n    user: \"Thomas Raklovits\",\n    action: \"replied to your comment in\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n  },\n  {\n    id: 5,\n    user: \"Sampson Addae\",\n    action: \"commented on\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n  },\n  {\n    id: 6,\n    user: \"Sam Altman\",\n    action: \"mentioned you in\",\n    target: \"loveui open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n  },\n]\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"6\"\n      height=\"6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 6 6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications)\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      }))\n    )\n  }\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification\n      )\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          aria-label=\"Open notifications\"\n        >\n          <BellIcon size={16} aria-hidden=\"true\" />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n        ></div>\n        {notifications.map((notification) => (\n          <div\n            key={notification.id}\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-xs text-muted-foreground\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-582.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-582",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/tooltip.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-582.tsx",
+      "content": "import { useId } from \"react\"\nimport {\n  FileTextIcon,\n  GlobeIcon,\n  HomeIcon,\n  LayersIcon,\n  UsersIcon,\n} from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport ThemeToggle from \"@/registry/building-blocks/default/components/navbar-components/theme-toggle\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/building-blocks/default/ui/tooltip\"\n\n// Navigation links with icons for desktop icon-only navigation\nconst navigationLinks = [\n  { href: \"#\", label: \"Dashboard\", icon: HomeIcon, active: true },\n  { href: \"#\", label: \"Projects\", icon: LayersIcon },\n  { href: \"#\", label: \"Documentation\", icon: FileTextIcon },\n  { href: \"#\", label: \"Team\", icon: UsersIcon },\n]\n\n// Language options\nconst languages = [\n  { value: \"en\", label: \"En\" },\n  { value: \"es\", label: \"Es\" },\n  { value: \"fr\", label: \"Fr\" },\n  { value: \"de\", label: \"De\" },\n  { value: \"ja\", label: \"Ja\" },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => {\n                    const Icon = link.icon\n                    return (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink\n                          href={link.href}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          active={link.active}\n                        >\n                          <Icon\n                            size={16}\n                            className=\"text-muted-foreground\"\n                            aria-hidden=\"true\"\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    )\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          <div className=\"flex items-center gap-6\">\n            {/* Logo */}\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n            {/* Desktop navigation - icon only */}\n            <NavigationMenu className=\"hidden md:flex\">\n              <NavigationMenuList className=\"gap-2\">\n                <TooltipProvider>\n                  {navigationLinks.map((link) => (\n                    <NavigationMenuItem key={link.label}>\n                      <Tooltip>\n                        <TooltipTrigger asChild>\n                          <NavigationMenuLink\n                            href={link.href}\n                            className=\"flex size-8 items-center justify-center p-1.5\"\n                          >\n                            <link.icon size={20} aria-hidden=\"true\" />\n                            <span className=\"sr-only\">{link.label}</span>\n                          </NavigationMenuLink>\n                        </TooltipTrigger>\n                        <TooltipContent\n                          side=\"bottom\"\n                          className=\"px-2 py-1 text-xs\"\n                        >\n                          <p>{link.label}</p>\n                        </TooltipContent>\n                      </Tooltip>\n                    </NavigationMenuItem>\n                  ))}\n                </TooltipProvider>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Theme toggle */}\n          <ThemeToggle />\n          {/* Language selector */}\n          <Select defaultValue=\"en\">\n            <SelectTrigger\n              id={`language-${id}`}\n              className=\"h-8 border-none px-2 shadow-none hover:bg-accent hover:text-accent-foreground [&>svg]:shrink-0 [&>svg]:text-muted-foreground/80\"\n              aria-label=\"Select language\"\n            >\n              <GlobeIcon size={16} aria-hidden=\"true\" />\n              <SelectValue className=\"hidden sm:inline-flex\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2\">\n              {languages.map((lang) => (\n                <SelectItem key={lang.value} value={lang.value}>\n                  <span className=\"flex items-center gap-2\">\n                    <span className=\"truncate\">{lang.label}</span>\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/theme-toggle.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoonIcon, SunIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/building-blocks/default/ui/toggle\"\n\nexport default function ThemeToggle() {\n  const [theme, setTheme] = useState<string>(\"light\")\n\n  return (\n    <div>\n      <Toggle\n        variant=\"outline\"\n        className=\"group size-8 rounded-full border-none text-muted-foreground shadow-none data-[state=on]:bg-transparent data-[state=on]:text-muted-foreground data-[state=on]:hover:bg-muted data-[state=on]:hover:text-foreground\"\n        pressed={theme === \"dark\"}\n        onPressedChange={() =>\n          setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n        }\n        aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n      >\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\n        <MoonIcon\n          size={16}\n          className=\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <SunIcon\n          size={16}\n          className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\"\n          aria-hidden=\"true\"\n        />\n      </Toggle>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-583.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-583",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/breadcrumb.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-583.tsx",
+      "content": "import { ChevronsUpDown } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport NotificationMenu from \"@/registry/building-blocks/default/components/navbar-components/notification-menu\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/building-blocks/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink href=\"#\" className=\"text-foreground\">\n                  <Logo />\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\n              <BreadcrumbItem className=\"md:hidden\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger className=\"hover:text-foreground\">\n                    <BreadcrumbEllipsis />\n                    <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    <DropdownMenuItem asChild>\n                      <a href=\"#\">Personal Account</a>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem asChild>\n                      <a href=\"#\">Projects</a>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </BreadcrumbItem>\n              <BreadcrumbItem className=\"max-md:hidden\">\n                <BreadcrumbLink href=\"#\">Personal Account</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"max-md:hidden\">\n                {\" \"}\n                /{\" \"}\n              </BreadcrumbSeparator>\n              <BreadcrumbItem className=\"max-md:hidden\">\n                <BreadcrumbLink href=\"#\">Projects</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\n              <BreadcrumbItem>\n                <Select defaultValue=\"1\">\n                  <SelectPrimitive.SelectTrigger\n                    aria-label=\"Select project\"\n                    asChild\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"h-8 px-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\"\n                    >\n                      <SelectValue placeholder=\"Select project\" />\n                      <ChevronsUpDown\n                        size={14}\n                        className=\"text-muted-foreground/80\"\n                      />\n                    </Button>\n                  </SelectPrimitive.SelectTrigger>\n                  <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n                    <SelectItem value=\"1\">Main project</SelectItem>\n                    <SelectItem value=\"2\">Origin project</SelectItem>\n                  </SelectContent>\n                </Select>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          {/* Notification */}\n          <NotificationMenu />\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/notification-menu.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst initialNotifications = [\n  {\n    id: 1,\n    user: \"Connor Love\",\n    action: \"requested review on\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 2,\n    user: \"Nathan Wickersham\",\n    action: \"shared\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 3,\n    user: \"Ian Shroeter\",\n    action: \"assigned you to\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n  },\n  {\n    id: 4,\n    user: \"Thomas Raklovits\",\n    action: \"replied to your comment in\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n  },\n  {\n    id: 5,\n    user: \"Sampson Addae\",\n    action: \"commented on\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n  },\n  {\n    id: 6,\n    user: \"Sam Altman\",\n    action: \"mentioned you in\",\n    target: \"loveui open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n  },\n]\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"6\"\n      height=\"6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 6 6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications)\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      }))\n    )\n  }\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification\n      )\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          aria-label=\"Open notifications\"\n        >\n          <BellIcon size={16} aria-hidden=\"true\" />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n        ></div>\n        {notifications.map((notification) => (\n          <div\n            key={notification.id}\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-xs text-muted-foreground\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-584.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-584",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-584.tsx",
+      "content": "import { useId } from \"react\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport NotificationMenu from \"@/registry/building-blocks/default/components/navbar-components/notification-menu\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", active: true },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem key={index} className=\"w-full\">\n                      <NavigationMenuLink\n                        href={link.href}\n                        className=\"py-1.5\"\n                        active={link.active}\n                      >\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Logo */}\n          <div className=\"flex items-center\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n          </div>\n        </div>\n        {/* Middle area */}\n        <div className=\"grow\">\n          {/* Search form */}\n          <div className=\"relative mx-auto w-full max-w-xs\">\n            <Input\n              id={id}\n              className=\"peer h-8 ps-8 pe-10\"\n              placeholder=\"Search...\"\n              type=\"search\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <SearchIcon size={16} />\n            </div>\n            <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground\">\n              <kbd className=\"inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n                ⌘K\n              </kbd>\n            </div>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          {/* Notification */}\n          <NotificationMenu />\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n      {/* Bottom navigation */}\n      <div className=\"border-t py-2 max-md:hidden\">\n        {/* Navigation menu */}\n        <NavigationMenu>\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, index) => (\n              <NavigationMenuItem key={index}>\n                <NavigationMenuLink\n                  active={link.active}\n                  href={link.href}\n                  className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                >\n                  {link.label}\n                </NavigationMenuLink>\n              </NavigationMenuItem>\n            ))}\n          </NavigationMenuList>\n        </NavigationMenu>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/notification-menu.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst initialNotifications = [\n  {\n    id: 1,\n    user: \"Connor Love\",\n    action: \"requested review on\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 2,\n    user: \"Nathan Wickersham\",\n    action: \"shared\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 3,\n    user: \"Ian Shroeter\",\n    action: \"assigned you to\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n  },\n  {\n    id: 4,\n    user: \"Thomas Raklovits\",\n    action: \"replied to your comment in\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n  },\n  {\n    id: 5,\n    user: \"Sampson Addae\",\n    action: \"commented on\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n  },\n  {\n    id: 6,\n    user: \"Sam Altman\",\n    action: \"mentioned you in\",\n    target: \"loveui open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n  },\n]\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"6\"\n      height=\"6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 6 6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications)\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      }))\n    )\n  }\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification\n      )\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          aria-label=\"Open notifications\"\n        >\n          <BellIcon size={16} aria-hidden=\"true\" />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n        ></div>\n        {notifications.map((notification) => (\n          <div\n            key={notification.id}\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-xs text-muted-foreground\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-585.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-585",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-585.tsx",
+      "content": "import { useId } from \"react\"\nimport {\n  HashIcon,\n  HouseIcon,\n  MailIcon,\n  SearchIcon,\n  UsersRound,\n} from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport NotificationMenu from \"@/registry/building-blocks/default/components/navbar-components/notification-menu\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst teams = [\"Acme Inc.\", \"loveui\", \"Junon\"]\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", icon: HouseIcon },\n  { href: \"#\", label: \"Hash\", icon: HashIcon },\n  { href: \"#\", label: \"Groups\", icon: UsersRound },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-48 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => {\n                    const Icon = link.icon\n                    return (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink\n                          href={link.href}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                        >\n                          <Icon\n                            size={16}\n                            className=\"text-muted-foreground\"\n                            aria-hidden=\"true\"\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    )\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          <div className=\"flex items-center gap-6\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n            {/* Search form */}\n            <div className=\"relative\">\n              <Input\n                id={id}\n                className=\"peer h-8 ps-8 pe-2\"\n                placeholder=\"Search...\"\n                type=\"search\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <SearchIcon size={16} />\n              </div>\n            </div>\n          </div>\n        </div>\n        {/* Middle area */}\n        <NavigationMenu className=\"max-md:hidden\">\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, index) => {\n              const Icon = link.icon\n              return (\n                <NavigationMenuItem key={index}>\n                  <NavigationMenuLink\n                    href={link.href}\n                    className=\"flex size-8 items-center justify-center p-1.5\"\n                    title={link.label}\n                  >\n                    <Icon aria-hidden=\"true\" />\n                    <span className=\"sr-only\">{link.label}</span>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              )\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-4\">\n          <div className=\"flex items-center gap-2\">\n            {/* Messages */}\n            <Button\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n              aria-label=\"Open notifications\"\n            >\n              <MailIcon size={16} aria-hidden=\"true\" />\n              <div\n                aria-hidden=\"true\"\n                className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n              />\n            </Button>\n            {/* Notification menu */}\n            <NotificationMenu />\n          </div>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/notification-menu.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nconst initialNotifications = [\n  {\n    id: 1,\n    user: \"Connor Love\",\n    action: \"requested review on\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 2,\n    user: \"Nathan Wickersham\",\n    action: \"shared\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n  },\n  {\n    id: 3,\n    user: \"Ian Shroeter\",\n    action: \"assigned you to\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n  },\n  {\n    id: 4,\n    user: \"Thomas Raklovits\",\n    action: \"replied to your comment in\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n  },\n  {\n    id: 5,\n    user: \"Sampson Addae\",\n    action: \"commented on\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n  },\n  {\n    id: 6,\n    user: \"Sam Altman\",\n    action: \"mentioned you in\",\n    target: \"loveui open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n  },\n]\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"6\"\n      height=\"6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 6 6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications)\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      }))\n    )\n  }\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification\n      )\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          aria-label=\"Open notifications\"\n        >\n          <BellIcon size={16} aria-hidden=\"true\" />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n        ></div>\n        {notifications.map((notification) => (\n          <div\n            key={notification.id}\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-xs text-muted-foreground\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-586.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-586",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-586.tsx",
+      "content": "import { useId } from \"react\"\nimport { MicIcon, SearchIcon } from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport ThemeToggle from \"@/registry/building-blocks/default/components/navbar-components/theme-toggle\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\n\nexport default function Component() {\n  const id = useId()\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Logo */}\n        <div className=\"flex-1\">\n          <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n            <Logo />\n          </a>\n        </div>\n        {/* Middle area */}\n        <div className=\"grow max-sm:hidden\">\n          {/* Search form */}\n          <div className=\"relative mx-auto w-full max-w-xs\">\n            <Input\n              id={id}\n              className=\"peer h-8 px-8\"\n              placeholder=\"Search...\"\n              type=\"search\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <SearchIcon size={16} />\n            </div>\n            <button\n              className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n              aria-label=\"Press to speak\"\n              type=\"submit\"\n            >\n              <MicIcon size={16} aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Community</a>\n          </Button>\n          <Button asChild size=\"sm\" className=\"text-sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n          <ThemeToggle />\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/theme-toggle.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoonIcon, SunIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/building-blocks/default/ui/toggle\"\n\nexport default function ThemeToggle() {\n  const [theme, setTheme] = useState<string>(\"light\")\n\n  return (\n    <div>\n      <Toggle\n        variant=\"outline\"\n        className=\"group size-8 rounded-full border-none text-muted-foreground shadow-none data-[state=on]:bg-transparent data-[state=on]:text-muted-foreground data-[state=on]:hover:bg-muted data-[state=on]:hover:text-foreground\"\n        pressed={theme === \"dark\"}\n        onPressedChange={() =>\n          setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n        }\n        aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n      >\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\n        <MoonIcon\n          size={16}\n          className=\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <SunIcon\n          size={16}\n          className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\"\n          aria-hidden=\"true\"\n        />\n      </Toggle>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-587.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-587",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-587.tsx",
+      "content": "import { useId } from \"react\"\nimport { HouseIcon, InboxIcon, SearchIcon, ZapIcon } from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", icon: HouseIcon, active: true },\n  { href: \"#\", label: \"Inbox\", icon: InboxIcon },\n  { href: \"#\", label: \"Insights\", icon: ZapIcon },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => {\n                    const Icon = link.icon\n                    return (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink\n                          href={link.href}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          active={link.active}\n                        >\n                          <Icon\n                            size={16}\n                            className=\"text-muted-foreground/80\"\n                            aria-hidden=\"true\"\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    )\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Logo */}\n          <div className=\"flex items-center\">\n            <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n              <Logo />\n            </a>\n          </div>\n        </div>\n        {/* Middle area */}\n        <NavigationMenu className=\"max-md:hidden\">\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, index) => {\n              const Icon = link.icon\n              return (\n                <NavigationMenuItem key={index}>\n                  <NavigationMenuLink\n                    active={link.active}\n                    href={link.href}\n                    className=\"flex-row items-center gap-2 py-1.5 font-medium text-foreground hover:text-primary\"\n                  >\n                    <Icon\n                      size={16}\n                      className=\"text-muted-foreground/80\"\n                      aria-hidden=\"true\"\n                    />\n                    <span>{link.label}</span>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              )\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          <div className=\"relative\">\n            <Input\n              id={id}\n              className=\"peer h-8 ps-8 pe-2\"\n              placeholder=\"Search...\"\n              type=\"search\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <SearchIcon size={16} />\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-588.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-588",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/navigation-menu.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-588.tsx",
+      "content": "import { HouseIcon, InboxIcon, SparklesIcon, ZapIcon } from \"lucide-react\"\n\nimport Logo from \"@/registry/building-blocks/default/components/navbar-components/logo\"\nimport UserMenu from \"@/registry/building-blocks/default/components/navbar-components/user-menu\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/building-blocks/default/ui/navigation-menu\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\n// Navigation links array\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", icon: HouseIcon, active: true },\n  { href: \"#\", label: \"Inbox\", icon: InboxIcon },\n  { href: \"#\", label: \"Insights\", icon: ZapIcon },\n]\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                variant=\"ghost\"\n                size=\"icon\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M4 12L20 12\"\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                  />\n                  <path\n                    d=\"M4 12H20\"\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => {\n                    const Icon = link.icon\n                    return (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink\n                          href={link.href}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          active={link.active}\n                        >\n                          <Icon\n                            size={16}\n                            className=\"text-muted-foreground/80\"\n                            aria-hidden=\"true\"\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    )\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n\n          <NavigationMenu className=\"max-md:hidden\">\n            <NavigationMenuList className=\"gap-2\">\n              {navigationLinks.map((link, index) => {\n                const Icon = link.icon\n                return (\n                  <NavigationMenuItem key={index}>\n                    <NavigationMenuLink\n                      active={link.active}\n                      href={link.href}\n                      className=\"flex-row items-center gap-2 py-1.5 font-medium text-foreground hover:text-primary\"\n                    >\n                      <Icon\n                        size={16}\n                        className=\"text-muted-foreground/80\"\n                        aria-hidden=\"true\"\n                      />\n                      <span>{link.label}</span>\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                )\n              })}\n            </NavigationMenuList>\n          </NavigationMenu>\n        </div>\n\n        {/* Middle side: Logo */}\n        <div className=\"flex items-center\">\n          <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n            <Logo />\n          </a>\n        </div>\n\n        {/* Right side: Actions */}\n        <div className=\"flex flex-1 items-center justify-end gap-4\">\n          {/* User menu */}\n          <UserMenu />\n          {/* Upgrade button */}\n          <Button size=\"sm\" className=\"text-sm sm:aspect-square\">\n            <SparklesIcon\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            <span className=\"sm:sr-only\">Upgrade</span>\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/logo.tsx",
+      "content": "export default function Logo() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"33\"\n      height=\"33\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/components/navbar-components/user-menu.tsx",
+      "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n          <Avatar>\n            <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n            <AvatarFallback>CL</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\" align=\"end\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate text-sm font-medium text-foreground\">\n            Connor Love\n          </span>\n          <span className=\"truncate text-xs font-normal text-muted-foreground\">\n            clove@loveui.dev\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "navbar, navigation"
+    ],
+    "colSpan": 3
+  }
+}