feat: implement comprehensive i18n system with German and English support

- Created type-safe i18n system with TranslationKeys interface
- Added German (de) and English (en) translations with 160+ keys
- Implemented I18nContext provider and useI18n hook
- Added LanguageSwitcher component for language selection
- Refactored all major components to use translations:
  * Home page, StatsDashboard, DramOfTheDay
  * BottleGrid, EditBottleForm, CameraCapture
  * BuddyList, SessionList, TastingNoteForm
  * StatusSwitcher and bottle management features
- Implemented locale-aware currency formatting (EUR)
- Implemented locale-aware date formatting
- Added localStorage persistence for language preference
- Added automatic browser language detection
- Organized translations into 8 main categories
- System is extensible for additional languages
This commit is contained in:
2025-12-18 13:44:48 +01:00
parent acf02a78dd
commit 334bece471
16 changed files with 741 additions and 120 deletions

View File

@@ -2,6 +2,7 @@
import React, { useMemo } from 'react';
import { TrendingUp, CreditCard, Star, Home, BarChart3 } from 'lucide-react';
import { useI18n } from '@/i18n/I18nContext';
interface Bottle {
id: string;
@@ -16,6 +17,7 @@ interface StatsDashboardProps {
}
export default function StatsDashboard({ bottles }: StatsDashboardProps) {
const { t, locale } = useI18n();
const stats = useMemo(() => {
const activeBottles = bottles.filter(b => b.status !== 'empty');
const totalValue = bottles.reduce((sum, b) => sum + (Number(b.purchase_price) || 0), 0);
@@ -45,28 +47,28 @@ export default function StatsDashboard({ bottles }: StatsDashboardProps) {
const statItems = [
{
label: 'Gesamtwert',
value: stats.totalValue.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }),
label: t('home.stats.totalValue'),
value: stats.totalValue.toLocaleString(locale === 'de' ? 'de-DE' : 'en-US', { style: 'currency', currency: 'EUR' }),
icon: CreditCard,
color: 'text-green-600',
bg: 'bg-green-50 dark:bg-green-900/20'
},
{
label: 'In der Bar',
label: t('home.stats.activeBottles'),
value: stats.activeCount,
icon: Home,
color: 'text-blue-600',
bg: 'bg-blue-50 dark:bg-blue-900/20'
},
{
label: 'Ø Bewertung',
label: t('home.stats.avgRating'),
value: `${stats.avgRating}/100`,
icon: Star,
color: 'text-amber-600',
bg: 'bg-amber-50 dark:bg-amber-900/20'
},
{
label: 'Top Brennerei',
label: t('home.stats.topDistillery'),
value: stats.topDistillery,
icon: BarChart3,
color: 'text-purple-600',