Adds front-end set-up

2026-06-20 17:04:17 +02:00
parent efd1569c26
commit 7dfc3a9692
62 changed files with 6875 additions and 3 deletions
@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+import { Languages } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuCheck,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+    changeLanguage,
+    LANGUAGE_LABELS,
+    SUPPORTED_LANGUAGES,
+    type SupportedLanguage,
+} from '@/i18n/config';
+
+/** Language selector for the topbar; lazy-loads the chosen locale (Q4-B). */
+export function LanguageSwitcher() {
+    const { t, i18n } = useTranslation();
+    const current = (i18n.resolvedLanguage ?? 'en') as SupportedLanguage;
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    aria-label={t('userMenu.language')}
+                    data-testid="language-switcher-button"
+                >
+                    <Languages />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuLabel>{t('userMenu.language')}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {SUPPORTED_LANGUAGES.map((lng) => (
+                    <DropdownMenuItem
+                        key={lng}
+                        onSelect={() => {
+                            void changeLanguage(lng);
+                        }}
+                        data-testid={`language-option-${lng}`}
+                    >
+                        {LANGUAGE_LABELS[lng]}
+                        <DropdownMenuCheck checked={current === lng} />
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}