47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Home, Flame, History, Tv, User } from 'lucide-react';
|
|
|
|
export default function BottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
// Hide on admin, login pages
|
|
if (pathname?.startsWith('/admin') || pathname?.startsWith('/login') || pathname?.startsWith('/dracin/watch')) {
|
|
return null;
|
|
}
|
|
|
|
const isActive = (path: string) => pathname === path;
|
|
|
|
const navItems = [
|
|
{ name: 'Trending', href: '/trending', icon: Flame },
|
|
{ name: 'Dracin', href: '/dracin', icon: Tv },
|
|
{ name: 'Home', href: '/', icon: Home },
|
|
{ name: 'History', href: '/history', icon: History },
|
|
{ name: 'Profile', href: '/profile', icon: User },
|
|
];
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 w-full bg-[#121212]/95 backdrop-blur-md border-t border-gray-800 z-[9999] pb-safe">
|
|
<nav className="flex justify-around items-center h-16">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = isActive(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex flex-col items-center justify-center w-full h-full space-y-1 ${active ? 'text-red-600' : 'text-gray-400 hover:text-gray-200'
|
|
}`}
|
|
>
|
|
<Icon className={`w-6 h-6 ${active ? 'fill-current' : ''}`} strokeWidth={active ? 2.5 : 2} />
|
|
<span className="text-[10px] font-medium">{item.name}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|