Remove settings, optimize mobile layout, highlight data analysis features Use generic company names, simulate today's timeline, responsive design Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Home, Users, Target, Database } from "lucide-react"
|
|
|
|
const navItems = [
|
|
{ href: "/", icon: Home, label: "概览" },
|
|
{ href: "/data-integration", icon: Database, label: "数据集成" },
|
|
{ href: "/user-portrait", icon: Users, label: "用户画像" },
|
|
{ href: "/user-value", icon: Target, label: "价值评估" },
|
|
]
|
|
|
|
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-2 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>
|
|
)
|
|
}
|