34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { NavLink } from 'react-router'
|
|
import { Home, Search, PlusCircle, ShoppingCart, User } from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ to: '/', icon: Home, label: 'Home' },
|
|
{ to: '/search', icon: Search, label: 'Suche' },
|
|
{ to: '/new', icon: PlusCircle, label: 'Neu' },
|
|
{ to: '/shopping', icon: ShoppingCart, label: 'Einkauf' },
|
|
{ to: '/profile', icon: User, label: 'Profil' },
|
|
]
|
|
|
|
export function BottomNav() {
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 bg-surface border-t border-sand z-50">
|
|
<div className="max-w-lg mx-auto flex justify-around items-center h-16">
|
|
{navItems.map(({ to, icon: Icon, label }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
`flex flex-col items-center gap-0.5 text-xs transition-colors ${
|
|
isActive ? 'text-primary' : 'text-warm-grey'
|
|
}`
|
|
}
|
|
>
|
|
<Icon size={22} />
|
|
<span>{label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|