// Client/Server Component "use client" // required for: useState (mobile menu state) /** * @name Navbar 07 * @description Double-row navbar with top utility bar and main navigation. * Features contact info and social links on top bar, main nav below. * * @slots navbar, navbar-top-bar, navbar-contact, navbar-social-links, * navbar-main, navbar-container, navbar-brand, navbar-brand-link, * navbar-brand-text, navbar-nav, navbar-nav-link, navbar-actions, * navbar-mobile-toggle, navbar-mobile-menu * @variant double-row * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Menu, X, Phone, Mail, Twitter, Linkedin, Instagram } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface NavLink { /** Unique identifier for list key */ id: string /** Link text */ label: string /** Link destination */ href: string } interface ContactInfo { /** Phone number */ phone?: string /** Email address */ email?: string } interface Navbar07Props { /** Brand/logo text */ brandName?: string /** Brand logo URL */ brandLogo?: string /** Navigation links */ links?: NavLink[] /** Contact information for top bar */ contact?: ContactInfo /** Show social links in top bar */ showSocialLinks?: boolean /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_LINKS: NavLink[] = [ { id: "home", label: "Home", href: "#" }, { id: "services", label: "Services", href: "#" }, { id: "portfolio", label: "Portfolio", href: "#" }, { id: "about", label: "About", href: "#" }, { id: "contact", label: "Contact", href: "#" }, ] const DEFAULT_CONTACT: ContactInfo = { phone: "+1 (555) 555-4567", email: "hello@example.com", } // ============================================================================ // COMPONENT // ============================================================================ function Navbar07({ brandName = "Agency", brandLogo, links = DEFAULT_LINKS, contact = DEFAULT_CONTACT, showSocialLinks = true, className, idBase, }: Navbar07Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const id = idBase ?? "navbar-07" return (

{/* Top Bar */}

{/* Contact Info */}

{contact.phone && ( )} {contact.email && ( )}

{/* Social Links */} {showSocialLinks && (

)}

{/* Main Navigation */}

{/* Brand */}

{brandLogo ? (

) : ( {brandName} )}

{/* Desktop Navigation */}

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

{/* Actions */}

{/* Mobile Toggle */}

{/* Mobile Menu */}

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

{/* Mobile Contact */}

{contact.phone && ( )} {contact.email && ( )}

{/* Mobile Social */} {showSocialLinks && (

)}

) } export default Navbar07 export { Navbar07, type Navbar07Props, type NavLink, type ContactInfo }