50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Home, ScrollText, Layers, Gamepad2, Mail } from 'lucide-react'
|
|
|
|
export type TabId = 'start' | 'regeln' | 'karten' | 'spiel' | 'kontakt'
|
|
|
|
const TABS: { id: TabId; label: string; icon: typeof Home }[] = [
|
|
{ id: 'start', label: 'Start', icon: Home },
|
|
{ id: 'regeln', label: 'Regeln', icon: ScrollText },
|
|
{ id: 'karten', label: 'Karten', icon: Layers },
|
|
{ id: 'spiel', label: 'Spiel', icon: Gamepad2 },
|
|
{ id: 'kontakt', label: 'Kontakt', icon: Mail },
|
|
]
|
|
|
|
interface Props {
|
|
aktiv: TabId
|
|
onWechsel: (tab: TabId) => void
|
|
}
|
|
|
|
export default function BottomNav({ aktiv, onWechsel }: Props) {
|
|
return (
|
|
<nav className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-[#170a2e]/85 backdrop-blur-xl">
|
|
<div className="mx-auto flex max-w-md items-stretch justify-between px-1 pb-safe">
|
|
{TABS.map(({ id, label, icon: Icon }) => {
|
|
const istAktiv = id === aktiv
|
|
return (
|
|
<button
|
|
key={id}
|
|
onClick={() => onWechsel(id)}
|
|
className={`flex flex-1 flex-col items-center gap-0.5 py-2.5 transition-all duration-200 ${
|
|
istAktiv ? 'text-pink-400' : 'text-white/45 hover:text-white/70'
|
|
}`}
|
|
aria-current={istAktiv ? 'page' : undefined}
|
|
>
|
|
<span
|
|
className={`rounded-full px-4 py-0.5 transition-all duration-300 ${
|
|
istAktiv ? 'bg-pink-400/15 shadow-[0_0_16px_rgba(244,114,182,0.35)]' : ''
|
|
}`}
|
|
>
|
|
<Icon size={21} strokeWidth={istAktiv ? 2.4 : 2} />
|
|
</span>
|
|
<span className={`text-[10px] font-bold tracking-wide ${istAktiv ? 'font-extrabold' : ''}`}>
|
|
{label}
|
|
</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|