// Client/Server Component "use client" // required for: useState (mobile menu) /** * @name Navbar 08 * @description Centered navigation with pill-style nav items featuring icons. * Clean design with logo on left, icon+text nav links in center, and accent CTA on right. * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { Menu, X, Home, Briefcase, CreditCard, Layers, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface NavLink { /** Unique identifier for list key */ id: string /** Link text */ label: string /** Link destination */ href: string /** Icon component */ icon: React.ElementType } interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface Navbar08Props { /** Brand/logo text */ brandName?: string /** Brand logo URL */ brandLogo?: string /** Navigation links */ links?: NavLink[] /** CTA button configuration */ cta?: CtaConfig /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_LINKS: NavLink[] = [ { id: "home", label: "Home", href: "#", icon: Home }, { id: "services", label: "Services", href: "#", icon: Briefcase }, { id: "pricing", label: "Pricing", href: "#", icon: CreditCard }, { id: "features", label: "Features", href: "#", icon: Layers }, ] // ============================================================================ // COMPONENT // ============================================================================ function Navbar08({ brandName = "Acme", brandLogo, links = DEFAULT_LINKS, cta = { text: "Open Account", href: "#" }, className, }: Navbar08Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) return (

{/* Brand */}

{brandLogo ? (

) : ( <>

{/* Desktop Navigation - Center Pills */}

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

{/* CTA Button */}

{cta.text}

{/* Mobile menu button */}

{/* Mobile menu */} {mobileMenuOpen && ( )}

) } export default Navbar08 export { Navbar08, type Navbar08Props, type NavLink }