Files
users/app/components/BottomNav.tsx
v0 b17b488f8e refactor: restructure navigation and module layout
Reorganize navigation and module structure based on new requirements.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2026-01-31 04:32:36 +00:00

44 lines
1.5 KiB
TypeScript

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { LayoutDashboard, Database, Tags, Brain, Monitor } from "lucide-react"
import { cn } from "@/lib/utils"
const NAV_ITEMS = [
{ href: "/", label: "概览", icon: LayoutDashboard },
{ href: "/data-governance", label: "数据治理", icon: Database },
{ href: "/tag-portrait", label: "标签画像", icon: Tags },
{ href: "/ai-insight", label: "AI洞察", icon: Brain },
{ href: "/monitoring", label: "监控", icon: Monitor },
] 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>
)
}