99 lines
3.7 KiB
TypeScript
99 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, useParams, useLocation } from 'react-router-dom';
|
|
import { CheckSquare, GalleryHorizontal, Home, Trophy } from 'lucide-react';
|
|
import { useEventData } from '../hooks/useEventData';
|
|
import { useTranslation } from '../i18n/useTranslation';
|
|
import { useEventBranding } from '../context/EventBrandingContext';
|
|
|
|
function TabLink({
|
|
to,
|
|
children,
|
|
isActive,
|
|
accentColor,
|
|
}: {
|
|
to: string;
|
|
children: React.ReactNode;
|
|
isActive: boolean;
|
|
accentColor: string;
|
|
}) {
|
|
const activeStyle = isActive
|
|
? {
|
|
background: `linear-gradient(135deg, ${accentColor}, ${accentColor}cc)`,
|
|
color: '#ffffff',
|
|
boxShadow: `0 12px 30px ${accentColor}33`,
|
|
}
|
|
: undefined;
|
|
|
|
return (
|
|
<NavLink
|
|
to={to}
|
|
className={`
|
|
flex h-14 flex-col items-center justify-center gap-1 rounded-lg border border-transparent p-2 text-xs font-medium transition-all duration-200 ease-out
|
|
touch-manipulation backdrop-blur-md
|
|
${isActive ? 'scale-[1.04]' : 'text-white/70 hover:text-white'}
|
|
`}
|
|
style={activeStyle}
|
|
>
|
|
{children}
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export default function BottomNav() {
|
|
const { token } = useParams();
|
|
const location = useLocation();
|
|
const { event, status } = useEventData();
|
|
const { t } = useTranslation();
|
|
const { branding } = useEventBranding();
|
|
|
|
const isReady = status === 'ready' && !!event;
|
|
|
|
if (!token || !isReady) return null;
|
|
|
|
const base = `/e/${encodeURIComponent(token)}`;
|
|
const currentPath = location.pathname;
|
|
|
|
const labels = {
|
|
home: t('navigation.home'),
|
|
tasks: t('navigation.tasks'),
|
|
achievements: t('navigation.achievements'),
|
|
gallery: t('navigation.gallery'),
|
|
};
|
|
|
|
const isHomeActive = currentPath === base || currentPath === `/${token}`;
|
|
const isTasksActive = currentPath.startsWith(`${base}/tasks`) || currentPath === `${base}/upload`;
|
|
const isAchievementsActive = currentPath.startsWith(`${base}/achievements`);
|
|
const isGalleryActive = currentPath.startsWith(`${base}/gallery`) || currentPath.startsWith(`${base}/photos`);
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-gradient-to-t from-black/30 via-black/10 to-transparent px-3 py-2 shadow-xl backdrop-blur-xl dark:border-white/10 dark:from-gray-950/85 dark:via-gray-900/70 dark:to-gray-900/35 dark:backdrop-blur-2xl dark:shadow-[0_18px_60px_rgba(15,15,30,0.6)]">
|
|
<div className="mx-auto flex max-w-sm items-center justify-around gap-2">
|
|
<TabLink to={`${base}`} isActive={isHomeActive} accentColor={branding.primaryColor}>
|
|
<div className="flex flex-col items-center gap-1">
|
|
<Home className="h-5 w-5" aria-hidden />
|
|
<span>{labels.home}</span>
|
|
</div>
|
|
</TabLink>
|
|
<TabLink to={`${base}/tasks`} isActive={isTasksActive} accentColor={branding.primaryColor}>
|
|
<div className="flex flex-col items-center gap-1">
|
|
<CheckSquare className="h-5 w-5" aria-hidden />
|
|
<span>{labels.tasks}</span>
|
|
</div>
|
|
</TabLink>
|
|
<TabLink to={`${base}/achievements`} isActive={isAchievementsActive} accentColor={branding.primaryColor}>
|
|
<div className="flex flex-col items-center gap-1">
|
|
<Trophy className="h-5 w-5" aria-hidden />
|
|
<span>{labels.achievements}</span>
|
|
</div>
|
|
</TabLink>
|
|
<TabLink to={`${base}/gallery`} isActive={isGalleryActive} accentColor={branding.primaryColor}>
|
|
<div className="flex flex-col items-center gap-1">
|
|
<GalleryHorizontal className="h-5 w-5" aria-hidden />
|
|
<span>{labels.gallery}</span>
|
|
</div>
|
|
</TabLink>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|