// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Navbar 01 * @description A clean navigation bar with logo, nav links on left, and utility actions * (language selector, login, social icons) on right. Minimal design with bottom border. * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Menu, X, ChevronDown, Facebook, Instagram, Twitter } from "lucide-react" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface NavLink { /** Unique identifier */ id: string /** Link text */ label: string /** Link destination */ href: string } interface SocialLink { /** Unique identifier */ id: string /** Platform name */ name: string /** Link destination */ href: string /** Icon component */ icon: React.ElementType } interface Navbar01Props { /** Brand/logo text */ brandName?: string /** Brand logo URL (optional, uses text if not provided) */ brandLogo?: string /** Navigation links */ navLinks?: NavLink[] /** Language options */ languages?: string[] /** Current language */ currentLanguage?: string /** Login link */ loginHref?: string /** Social media links */ socialLinks?: SocialLink[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultNavLinks: NavLink[] = [ { id: "features", label: "Features", href: "#" }, { id: "pricing", label: "Pricing", href: "#" }, { id: "about", label: "About", href: "#" }, ] const defaultSocialLinks: SocialLink[] = [ { id: "facebook", name: "Facebook", href: "#", icon: Facebook }, { id: "instagram", name: "Instagram", href: "#", icon: Instagram }, { id: "twitter", name: "Twitter", href: "#", icon: Twitter }, ] // ============================================================================ // COMPONENT // ============================================================================ function Navbar01({ brandName = "Acme", brandLogo, navLinks = defaultNavLinks, languages = ["English", "Spanish", "French"], currentLanguage = "English", loginHref = "#", socialLinks = defaultSocialLinks, className, }: Navbar01Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const [langMenuOpen, setLangMenuOpen] = React.useState(false) const [selectedLang, setSelectedLang] = React.useState(currentLanguage) return (

{/* Left section: Brand + Nav Links */}

{/* Brand */} {brandLogo ? (

) : ( <>

{brandName} )} {/* Desktop nav links */}

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

{/* Right section: Language, Login, Social */}

{/* Language selector */}

{langMenuOpen && (

{languages.map((lang) => ( ))}

)}

{/* Login link */} Login {/* Divider */} {/* Mobile menu button */}

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

) } export default Navbar01 export { Navbar01 }