49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
import { Home, Search, Library, Settings } from 'lucide-react';
|
|
import { useLocation, Link } from 'react-router-dom';
|
|
import { useState } from 'react';
|
|
import SettingsModal from './SettingsModal';
|
|
|
|
export default function BottomNav() {
|
|
const location = useLocation();
|
|
const path = location.pathname;
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
|
|
const tabs = [
|
|
{ name: 'Home', icon: Home, path: '/' },
|
|
{ name: 'Search', icon: Search, path: '/search' },
|
|
{ name: 'Library', icon: Library, path: '/library' },
|
|
];
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-neutral-900 border-t border-neutral-800 pb-safe md:hidden z-50">
|
|
<div className="flex justify-around items-center h-16">
|
|
{tabs.map((tab) => {
|
|
const isActive = path === tab.path;
|
|
return (
|
|
<Link
|
|
key={tab.name}
|
|
to={tab.path}
|
|
className={`flex flex-col items-center justify-center w-full h-full transition-colors ${isActive ? 'text-white' : 'text-neutral-500 hover:text-neutral-300'
|
|
}`}
|
|
>
|
|
<tab.icon className="w-6 h-6 mb-1" strokeWidth={isActive ? 2.5 : 2} />
|
|
<span className="text-[10px] uppercase font-medium tracking-wide">{tab.name}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
<button
|
|
onClick={() => setIsSettingsOpen(true)}
|
|
className="flex flex-col items-center justify-center w-full h-full transition-colors text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
<Settings className="w-6 h-6 mb-1" strokeWidth={2} />
|
|
<span className="text-[10px] uppercase font-medium tracking-wide">Settings</span>
|
|
</button>
|
|
</div>
|
|
|
|
<SettingsModal
|
|
isOpen={isSettingsOpen}
|
|
onClose={() => setIsSettingsOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|