大海
39 lines
1005 B
TypeScript
39 lines
1005 B
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
interface NavItem {
|
|
name: string;
|
|
href: string;
|
|
icon: string;
|
|
}
|
|
|
|
export function BottomNav({ items }: { items: NavItem[] }) {
|
|
const pathname = usePathname();
|
|
|
|
if (!items.length) return null;
|
|
|
|
return (
|
|
<nav className="lg:hidden fixed bottom-0 inset-x-0 bg-white border-t border-gray-100 z-40">
|
|
<div className="flex items-center justify-around h-16">
|
|
{items.map((item) => {
|
|
const active = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex flex-col items-center gap-0.5 px-3 py-1 ${
|
|
active ? "text-blue-600" : "text-gray-400"
|
|
}`}
|
|
>
|
|
<span className="text-xl">{item.icon}</span>
|
|
<span className="text-[10px]">{item.name}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|