// Client/Server Component "use client" // required for: useState (mobile menu, search state) /** * @name Navbar 05 * @description E-commerce navigation with search, cart, and account icons. * Clean, modern design optimized for online stores with wishlist and cart badges. * * @slots navbar, navbar-container, navbar-brand, navbar-brand-link, navbar-brand-text, * navbar-nav, navbar-nav-link, navbar-search, navbar-search-input, * navbar-actions, navbar-action-btn, navbar-cart-badge, * navbar-mobile-toggle, navbar-mobile-menu, navbar-mobile-search, * navbar-mobile-nav, navbar-mobile-link, navbar-mobile-actions * @variant ecommerce * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Menu, X, Search, ShoppingCart, User, Heart } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface NavLink { /** Unique identifier for list key */ id: string /** Link text */ label: string /** Link destination */ href: string /** Whether this is a sale/highlighted link */ isHighlighted?: boolean } interface Navbar05Props { /** Brand/logo text */ brandName?: string /** Brand logo URL */ brandLogo?: string /** Navigation links */ links?: NavLink[] /** Cart item count */ cartCount?: number /** Wishlist count */ wishlistCount?: number /** Search placeholder text */ searchPlaceholder?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_LINKS: NavLink[] = [ { id: "new-arrivals", label: "New Arrivals", href: "#" }, { id: "women", label: "Women", href: "#" }, { id: "men", label: "Men", href: "#" }, { id: "sale", label: "Sale", href: "#", isHighlighted: true }, ] // ============================================================================ // COMPONENT // ============================================================================ function Navbar05({ brandName = "Store", brandLogo, links = DEFAULT_LINKS, cartCount = 3, wishlistCount = 0, searchPlaceholder = "Search products...", className, idBase, }: Navbar05Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const [searchOpen, setSearchOpen] = React.useState(false) const id = idBase ?? "navbar-05" return (

{/* Mobile menu button */} {/* Brand */}

{brandLogo ? (

) : ( {brandName} )}

{/* Desktop Navigation */}

{links.map((link) => ( {link.label} ))}

{/* Desktop Search */}

{/* Actions */}

{/* Mobile search toggle */} {/* Wishlist */} {/* Account */} {/* Cart */}

{/* Mobile Search Bar */}

{/* Mobile Menu */}

) } export default Navbar05 export { Navbar05, type Navbar05Props, type NavLink }