30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Home, Search, Library } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function MobileNav() {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => pathname === path;
|
|
|
|
return (
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-black/95 backdrop-blur-md border-t border-white/10 h-[64px] flex items-center justify-around z-50 pb-safe">
|
|
<Link href="/" className={`flex flex-col items-center gap-1 ${isActive('/') ? 'text-white' : 'text-neutral-400'}`}>
|
|
<Home size={24} fill={isActive('/') ? "currentColor" : "none"} />
|
|
<span className="text-[10px]">Home</span>
|
|
</Link>
|
|
|
|
<Link href="/search" className={`flex flex-col items-center gap-1 ${isActive('/search') ? 'text-white' : 'text-neutral-400'}`}>
|
|
<Search size={24} />
|
|
<span className="text-[10px]">Search</span>
|
|
</Link>
|
|
|
|
<Link href="/library" className={`flex flex-col items-center gap-1 ${isActive('/library') ? 'text-white' : 'text-neutral-400'}`}>
|
|
<Library size={24} />
|
|
<span className="text-[10px]">Library</span>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|