44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { LayoutDashboard, Database, Tags, Bot, Package } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: "/", label: "概览", icon: LayoutDashboard },
|
|
{ href: "/data-ingestion", label: "数据", icon: Database },
|
|
{ href: "/tag-portrait", label: "画像", icon: Tags },
|
|
{ href: "/ai-agent", label: "AI", icon: Bot },
|
|
{ href: "/data-market", label: "市场", icon: Package },
|
|
] as const
|
|
|
|
export default function BottomNav() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-40 border-t bg-white/95 backdrop-blur md:hidden">
|
|
<ul className="grid grid-cols-5">
|
|
{NAV_ITEMS.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname === href || (href !== "/" && pathname.startsWith(`${href}/`))
|
|
return (
|
|
<li key={href}>
|
|
<Link
|
|
href={href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-1 py-2 text-xs",
|
|
active ? "text-blue-600" : "text-gray-500",
|
|
)}
|
|
>
|
|
<Icon className={cn("h-5 w-5", active && "text-blue-600")} />
|
|
<span>{label}</span>
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|