Files
users/app/components/BottomNav.tsx
v0 2ca12179e2 fix: support default and named exports for useDebounce hook
Ensure compatibility with both default and named exports for useDebounce.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2025-08-08 11:46:31 +00:00

43 lines
1.4 KiB
TypeScript

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, Database, Users, Bot } from 'lucide-react'
import { cn } from '@/lib/utils'
const NAV_ITEMS = [
{ href: '/', label: '首页', icon: Home },
{ href: '/data-platform', label: '数据中台', icon: Database },
{ href: '/user-portrait', label: '画像', icon: Users },
{ href: '/ai-assistant', label: 'AI智能助手', icon: Bot },
] 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-4">
{NAV_ITEMS.map(({ href, label, icon: Icon }) => {
const active = pathname === 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-gray-900' : 'text-gray-500',
)}
>
<Icon className={cn('h-5 w-5', active && 'fill-gray-900')} />
<span>{label}</span>
</Link>
</li>
)
})}
</ul>
</nav>
)
}