"use client";
import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import Image from "next/image";
import { cn } from "@/app/lib/utils";
interface NavItem {
name: string;
href: string;
}
interface FloatingNavbarProps {
navItems: NavItem[];
brandName?: string;
brandHref?: string;
brandLogo?: string | React.ReactNode; // URL string or custom React element
showCta?: boolean;
ctaText?: string;
ctaHref?: string;
className?: string;
}
export function FloatingNavbar({
navItems,
brandName = "Aurora UI",
brandHref = "/",
brandLogo,
showCta = true,
ctaText = "Get Started",
ctaHref = "/components",
className,
}: FloatingNavbarProps) {
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<motion.div
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.3 }}
className={cn(
"fixed left-1/2 top-6 z-50 -translate-x-1/2 transition-all duration-300",
isScrolled ? "top-4" : "top-6",
className
)}
>
<nav
className={cn(
"flex items-center gap-1 rounded-full border border-border/50 bg-surface/80 px-6 py-3 backdrop-blur-xl transition-all duration-300",
isScrolled ? "shadow-lg shadow-black/5" : "shadow-md shadow-black/5"
)}
>
<Link href={brandHref}>
<div className="mr-6 cursor-pointer flex items-center gap-2">
{brandLogo && (
<div className="flex items-center">
{typeof brandLogo === "string" ? (
<Image
src={brandLogo}
alt={brandName || "Brand"}
width={32}
height={32}
className="h-8 w-auto"
/>
) : (
brandLogo
)}
</div>
)}
{brandName && !brandLogo && (
<span className="bg-gradient-to-r from-accent via-accent-secondary to-accent-tertiary bg-clip-text text-xl font-bold text-transparent">
{brandName}
</span>
)}
{brandName && brandLogo && (
<span className="text-lg font-bold text-foreground">
{brandName}
</span>
)}
</div>
</Link>
<div className="flex items-center gap-1">
{navItems.map((item) => (
<Link key={item.name} href={item.href}>
<button
className={cn(
"relative rounded-full px-4 py-2 text-sm font-medium transition-all duration-200",
"text-foreground/70 hover:text-foreground",
"hover:bg-surface/60"
)}
>
{item.name}
</button>
</Link>
))}
</div>
{showCta && (
<div className="ml-4 pl-4 border-l border-border/50">
<Link href={ctaHref}>
<button className="rounded-full bg-gradient-to-r from-accent via-accent-secondary to-accent px-5 py-2 text-sm font-medium text-white shadow-lg shadow-accent/20 transition-all duration-200 hover:shadow-accent/30 hover:scale-105">
{ctaText}
</button>
</Link>
</div>
)}
</nav>
</motion.div>
);
}