40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, useParams } from 'react-router-dom';
|
|
import { Button } from '@/components/ui/button';
|
|
import { GalleryHorizontal, Home, Trophy } from 'lucide-react';
|
|
|
|
function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
|
|
return (
|
|
<NavLink to={to} className={({ isActive }) => (isActive ? 'text-foreground' : 'text-muted-foreground')}>
|
|
{children}
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export default function BottomNav() {
|
|
const { slug } = useParams();
|
|
if (!slug) return null; // Only show bottom nav within event context
|
|
const base = `/e/${encodeURIComponent(slug)}`;
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 z-20 border-t bg-white/90 px-3 py-2 backdrop-blur dark:bg-black/40">
|
|
<div className="mx-auto flex max-w-md items-center justify-between">
|
|
<TabLink to={`${base}`}>
|
|
<Button variant="ghost" size="sm" className="flex flex-col gap-1">
|
|
<Home className="h-5 w-5" /> <span className="text-xs">Start</span>
|
|
</Button>
|
|
</TabLink>
|
|
<TabLink to={`${base}/gallery`}>
|
|
<Button variant="ghost" size="sm" className="flex flex-col gap-1">
|
|
<GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">Galerie</span>
|
|
</Button>
|
|
</TabLink>
|
|
<TabLink to={`${base}/achievements`}>
|
|
<Button variant="ghost" size="sm" className="flex flex-col gap-1">
|
|
<Trophy className="h-5 w-5" /> <span className="text-xs">Erfolge</span>
|
|
</Button>
|
|
</TabLink>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|