// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Navbar 03 * @description A centered logo navigation bar with nav items split on * left and right sides. Clean, symmetrical design. * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { Menu, X } from "lucide-react" import { ButtonLink } from "@/registry/ui/button-link" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface NavLink { /** Unique identifier */ id: string /** Link text */ label: string /** Link destination */ href: string } interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface Navbar03Props { /** Brand/logo text */ brandName?: string /** Brand logo URL (optional, uses text if not provided) */ brandLogo?: string /** Left navigation links */ leftLinks?: NavLink[] /** Right navigation links */ rightLinks?: NavLink[] /** CTA button */ cta?: CtaConfig /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultLeftLinks: NavLink[] = [ { id: "features", label: "Features", href: "#" }, { id: "pricing", label: "Pricing", href: "#" }, ] const defaultRightLinks: NavLink[] = [ { id: "about", label: "About", href: "#" }, { id: "blog", label: "Blog", href: "#" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Navbar03({ brandName = "Acme", brandLogo, leftLinks = defaultLeftLinks, rightLinks = defaultRightLinks, cta = { text: "Get Started", href: "#" }, className, }: Navbar03Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const allLinks = [...leftLinks, ...rightLinks] return (

{/* Mobile menu button (left) */}

{/* Desktop left nav links */}

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

{/* Centered Brand */}

{brandLogo ? (

) : ( {brandName} )}

{/* Desktop right nav links and CTA */}

{rightLinks.map((link) => ( {link.label} ))} {cta && ( {cta.text} )}

{/* Mobile CTA placeholder for alignment */}

{cta && ( {cta.text} )}

{/* Mobile menu */}

) } export default Navbar03 export { Navbar03 }