Files
users/app/components/BottomNav.tsx
v0 901763fae0 fix: resolve deployment errors and add missing files
Fix CSS issue and create missing documentation files
Add new data platform and mobile optimization features

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2025-07-19 02:34:18 +00:00

41 lines
1.5 KiB
TypeScript

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Database, Search, Target, Brain } from "lucide-react"
const navItems = [
{ href: "/", icon: Home, label: "概览" },
{ href: "/data-platform", icon: Database, label: "数据中台" },
{ href: "/user-discovery", icon: Search, label: "用户发现" },
{ href: "/user-valuation", icon: Target, label: "用户估值" },
{ href: "/ai-analysis", icon: Brain, label: "AI分析" },
]
export default function BottomNav() {
const pathname = usePathname()
return (
<nav className="fixed bottom-0 left-0 right-0 glass-nav safe-area-bottom z-50 mx-2 mb-2">
<div className="flex justify-around items-center py-2">
{navItems.map((item) => {
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
return (
<Link
key={item.href}
href={item.href}
className={`flex flex-col items-center justify-center px-1 py-2 rounded-xl transition-all duration-300 min-w-0 flex-1 ${
isActive ? "glass-heavy text-blue-600 scale-105" : "text-gray-600 hover:glass-light hover:text-blue-500"
}`}
>
<item.icon className={`h-4 w-4 mb-1 ${isActive ? "text-blue-600" : ""}`} />
<span className="text-xs font-medium truncate">{item.label}</span>
</Link>
)
})}
</div>
</nav>
)
}