robin
334bece471
- 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
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
'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;
|