90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Library, BookOpen, Mic, ListMusic } from "lucide-react";
|
|
import { cn } from "@/utils/cn";
|
|
import { useIsMobile, useIsTablet } from "@/hooks/useMediaQuery";
|
|
|
|
const navigationItems = [
|
|
{
|
|
name: "Library",
|
|
href: "/library",
|
|
icon: Library,
|
|
matchPattern: "/library"
|
|
},
|
|
{
|
|
name: "Audiobooks",
|
|
href: "/audiobooks",
|
|
icon: BookOpen,
|
|
matchPattern: "/audiobooks"
|
|
},
|
|
{
|
|
name: "Podcasts",
|
|
href: "/podcasts",
|
|
icon: Mic,
|
|
matchPattern: "/podcasts"
|
|
},
|
|
{
|
|
name: "Playlists",
|
|
href: "/playlists",
|
|
icon: ListMusic,
|
|
matchPattern: "/playlist" // Matches both /playlists and /playlist/[id]
|
|
},
|
|
];
|
|
|
|
export function BottomNavigation() {
|
|
const pathname = usePathname();
|
|
const isMobile = useIsMobile();
|
|
const isTablet = useIsTablet();
|
|
const isMobileOrTablet = isMobile || isTablet;
|
|
|
|
// Only render on mobile/tablet
|
|
if (!isMobileOrTablet) return null;
|
|
|
|
return (
|
|
<nav
|
|
className="fixed bottom-0 left-0 right-0 z-40 bg-black border-t border-white/10"
|
|
style={{
|
|
paddingBottom: 'env(safe-area-inset-bottom, 0px)'
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-around h-14">
|
|
{navigationItems.map((item) => {
|
|
const isActive = pathname.startsWith(item.matchPattern);
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center flex-1 h-full py-2 transition-colors",
|
|
isActive
|
|
? "text-white"
|
|
: "text-gray-500 active:text-gray-300"
|
|
)}
|
|
>
|
|
<Icon
|
|
className={cn(
|
|
"w-5 h-5 mb-1",
|
|
isActive && "text-white"
|
|
)}
|
|
strokeWidth={isActive ? 2.5 : 2}
|
|
/>
|
|
<span
|
|
className={cn(
|
|
"text-[10px] tracking-wide",
|
|
isActive ? "font-semibold" : "font-medium"
|
|
)}
|
|
>
|
|
{item.name}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|