Guest PWA vollständig lokalisiert

resources/js/guest/components/BottomNav.tsx

@@ -2,6 +2,7 @@ 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';
 
 function TabLink({
   to,
@@ -31,32 +32,21 @@ export default function BottomNav() {
   const { token } = useParams();
   const location = useLocation();
   const { event, status } = useEventData();
+  const { t } = useTranslation();
 
   const isReady = status === 'ready' && !!event;
 
   if (!token || !isReady) return null; // Only show bottom nav within event context
   const base = `/e/${encodeURIComponent(token)}`;
   const currentPath = location.pathname;
-  const locale = event?.default_locale || 'de';
 
-  // Translations
-  const translations = {
-    de: {
-      home: 'Start',
-      tasks: 'Aufgaben',
-      achievements: 'Erfolge',
-      gallery: 'Galerie'
-    },
-    en: {
-      home: 'Home',
-      tasks: 'Tasks',
-      achievements: 'Achievements',
-      gallery: 'Gallery'
-    }
+  const labels = {
+    home: t('navigation.home'),
+    tasks: t('navigation.tasks'),
+    achievements: t('navigation.achievements'),
+    gallery: t('navigation.gallery'),
   };
 
-  const t = translations[locale as keyof typeof translations] || translations.de;
-
   // Improved active state logic
   const isHomeActive = currentPath === base || currentPath === `/${token}`;
   const isTasksActive = currentPath.startsWith(`${base}/tasks`) || currentPath === `${base}/upload`;
@@ -68,22 +58,22 @@ export default function BottomNav() {
       <div className="mx-auto flex max-w-sm items-center justify-around">
         <TabLink to={`${base}`} isActive={isHomeActive}>
           <div className="flex flex-col items-center gap-1">
-            <Home className="h-5 w-5" /> <span className="text-xs">{t.home}</span>
+            <Home className="h-5 w-5" /> <span className="text-xs">{labels.home}</span>
           </div>
         </TabLink>
         <TabLink to={`${base}/tasks`} isActive={isTasksActive}>
           <div className="flex flex-col items-center gap-1">
-            <CheckSquare className="h-5 w-5" /> <span className="text-xs">{t.tasks}</span>
+            <CheckSquare className="h-5 w-5" /> <span className="text-xs">{labels.tasks}</span>
           </div>
         </TabLink>
         <TabLink to={`${base}/achievements`} isActive={isAchievementsActive}>
           <div className="flex flex-col items-center gap-1">
-            <Trophy className="h-5 w-5" /> <span className="text-xs">{t.achievements}</span>
+            <Trophy className="h-5 w-5" /> <span className="text-xs">{labels.achievements}</span>
           </div>
         </TabLink>
         <TabLink to={`${base}/gallery`} isActive={isGalleryActive}>
           <div className="flex flex-col items-center gap-1">
-            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{t.gallery}</span>
+            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{labels.gallery}</span>
           </div>
         </TabLink>
       </div>