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:
35
src/components/LanguageSwitcher.tsx
Normal file
35
src/components/LanguageSwitcher.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
|
||||
const LanguageSwitcher = () => {
|
||||
const { locale, setLocale } = useI18n();
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setLocale('de')}
|
||||
className={`p-1.5 rounded-lg transition-all ${locale === 'de'
|
||||
? 'bg-amber-100 dark:bg-amber-900/30 scale-110 shadow-sm'
|
||||
: 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
|
||||
}`}
|
||||
title="Deutsch"
|
||||
>
|
||||
<span className="text-lg">🇩🇪</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLocale('en')}
|
||||
className={`p-1.5 rounded-lg transition-all ${locale === 'en'
|
||||
? 'bg-amber-100 dark:bg-amber-900/30 scale-110 shadow-sm'
|
||||
: 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
|
||||
}`}
|
||||
title="English"
|
||||
>
|
||||
<span className="text-lg">🇬🇧</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LanguageSwitcher;
|
||||
Reference in New Issue
Block a user