38 lines
1.8 KiB
TypeScript
38 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Home, Search, Library, Settings } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
import SettingsModal from "./SettingsModal";
|
|
|
|
export default function MobileNav() {
|
|
const pathname = usePathname();
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
|
|
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>
|
|
<button onClick={() => setIsSettingsOpen(true)} className={`flex flex-col items-center gap-1 text-neutral-400 hover:text-white`}>
|
|
<Settings size={24} />
|
|
<span className="text-[10px]">Settings</span>
|
|
</button>
|
|
<SettingsModal isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
|
|
</div>
|
|
);
|
|
}
|