43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
type NavItem = {
|
|
href: string;
|
|
label: string;
|
|
};
|
|
|
|
const navItems: NavItem[] = [
|
|
{ href: '/', label: '首頁' },
|
|
{ href: '/daily-card', label: '作戰' },
|
|
{ href: '/live-score', label: '比分' },
|
|
{ href: '/schedule', label: '賽程' },
|
|
{ href: '/source-health', label: '健康' },
|
|
];
|
|
|
|
export function MobileBottomNav() {
|
|
const path = usePathname() || '/';
|
|
|
|
return (
|
|
<nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#e7cfa7] bg-[#f6f0e1]/95 shadow-[0_-8px_24px_rgba(98,58,34,0.12)] backdrop-blur md:hidden">
|
|
<div className="mx-auto flex max-w-7xl justify-between px-2 py-2">
|
|
{navItems.map((item) => {
|
|
const isActive = item.href === '/' ? path === '/' : path === item.href || path.startsWith(`${item.href}/`);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`dot-matrix flex-1 rounded-xl px-3 py-2 text-center text-xs font-semibold transition ${
|
|
isActive ? 'bg-[#7d2a15] text-white' : 'text-[#6a4935]'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|