40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { NavLink } from "react-router-dom"
|
|
import { Home, ListChecks, CheckSquare, BarChart3, Settings } from "lucide-react"
|
|
import clsx from "clsx"
|
|
|
|
export default function Navigation() {
|
|
const navItems = [
|
|
{ to: "/", icon: Home, label: "Сегодня" },
|
|
{ to: "/habits", icon: ListChecks, label: "Привычки" },
|
|
{ to: "/tasks", icon: CheckSquare, label: "Задачи" },
|
|
{ to: "/stats", icon: BarChart3, label: "Статистика" },
|
|
{ to: "/settings", icon: Settings, label: "Настройки" },
|
|
]
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-100 z-50">
|
|
<div className="max-w-lg mx-auto px-4">
|
|
<div className="flex items-center justify-around py-2">
|
|
{navItems.map(({ to, icon: Icon, label }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
clsx(
|
|
"flex flex-col items-center gap-1 px-2 py-2 rounded-xl transition-all",
|
|
isActive
|
|
? "text-primary-600 bg-primary-50"
|
|
: "text-gray-400 hover:text-gray-600"
|
|
)
|
|
}
|
|
>
|
|
<Icon size={20} />
|
|
<span className="text-xs font-medium">{label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|