// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Navbar 02 * @description A sticky/floating navigation bar with background blur effect, * elevated shadow on scroll, and clean minimal 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 Navbar02Props { /** Brand/logo text */ brandName?: string /** Brand logo URL (optional, uses text if not provided) */ brandLogo?: string /** Navigation links */ navLinks?: NavLink[] /** CTA button */ cta?: CtaConfig /** 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: "#" }, { id: "blog", label: "Blog", href: "#" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Navbar02({ brandName = "Acme", brandLogo, navLinks = defaultNavLinks, cta = { text: "Get Started", href: "#" }, className, }: Navbar02Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const [scrolled, setScrolled] = React.useState(false) React.useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

{/* Brand */}

{brandLogo ? (

) : ( {brandName} )}

{/* Mobile menu button */}

{/* Desktop nav links */}

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

{/* Desktop CTA */}

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

{/* Mobile menu */}

) } export default Navbar02 export { Navbar02 }