| 1 | "use client"; |
| 2 | |
| 3 | import Link from "next/link"; |
| 4 | import { usePathname } from "next/navigation"; |
| 5 | import { IconFeed, IconStudio, IconMe } from "@/components/ui/icons"; |
| 6 | |
| 7 | function NavLink({ |
| 8 | href, |
| 9 | label, |
| 10 | icon, |
| 11 | active, |
| 12 | }: { |
| 13 | href: string; |
| 14 | label: string; |
| 15 | icon: React.ReactNode; |
| 16 | active: boolean; |
| 17 | }) { |
| 18 | return ( |
| 19 | <Link |
| 20 | href={href} |
| 21 | className={`flex flex-col items-center gap-1 transition-all duration-200 ${ |
| 22 | active ? "opacity-100" : "opacity-35 hover:opacity-70" |
| 23 | }`} |
| 24 | > |
| 25 | <div className={`transition-transform duration-200 ${active ? "scale-110" : ""}`}> |
| 26 | {icon} |
| 27 | </div> |
| 28 | <span className="text-[9px] uppercase tracking-widest text-nord-white">{label}</span> |
| 29 | <div |
| 30 | className={`w-1 h-1 rounded-full bg-nord-white transition-opacity duration-200 ${ |
| 31 | active ? "opacity-100" : "opacity-0" |
| 32 | }`} |
| 33 | /> |
| 34 | </Link> |
| 35 | ); |
| 36 | } |
| 37 | |
| 38 | export default function NordNav() { |
| 39 | const pathname = usePathname(); |
| 40 | |
| 41 | return ( |
| 42 | <nav className="fixed bottom-8 left-1/2 -translate-x-1/2 w-[90%] max-w-md h-16 bg-nord-gray/80 backdrop-blur-2xl rounded-full border border-white/10 flex justify-around items-center px-8 z-50"> |
| 43 | <NavLink href="/" label="Feed" icon={<IconFeed />} active={pathname === "/"} /> |
| 44 | <NavLink href="/studio" label="Studio" icon={<IconStudio />} active={pathname === "/studio"} /> |
| 45 | <NavLink href="/me" label="Me" icon={<IconMe />} active={pathname === "/me"} /> |
| 46 | </nav> |
| 47 | ); |
| 48 | } |