Files
ragusaitweb/src/i18n/index.tsx
2026-01-29 05:00:43 +00:00

72 lines
1.9 KiB
TypeScript

import { createContext, useContext, useState, useEffect, useMemo, useCallback, type ReactNode } from 'react';
import { de, type Translations } from './de';
import { en } from './en';
type Language = 'de' | 'en';
interface LanguageContextType {
language: Language;
setLanguage: (lang: Language) => void;
t: Translations;
}
const translations: Record<Language, Translations> = { de, en };
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
const STORAGE_KEY = 'ragusa-it-lang';
function getInitialLanguage(): Language {
if (typeof window === 'undefined') return 'de';
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === 'de' || stored === 'en') return stored;
const browserLang = navigator.language.split('-')[0];
return browserLang === 'en' ? 'en' : 'de';
}
export function LanguageProvider({ children }: { children: ReactNode }) {
const [language, setLanguageState] = useState<Language>('de');
const [isInitialized, setIsInitialized] = useState(false);
useEffect(() => {
setLanguageState(getInitialLanguage());
setIsInitialized(true);
}, []);
const setLanguage = useCallback((lang: Language) => {
setLanguageState(lang);
localStorage.setItem(STORAGE_KEY, lang);
document.documentElement.lang = lang;
}, []);
useEffect(() => {
if (isInitialized) {
document.documentElement.lang = language;
}
}, [language, isInitialized]);
const value = useMemo<LanguageContextType>(() => ({
language,
setLanguage,
t: translations[language],
}), [language, setLanguage]);
return (
<LanguageContext.Provider value={value}>
{children}
</LanguageContext.Provider>
);
}
export function useTranslation() {
const context = useContext(LanguageContext);
if (!context) {
throw new Error('useTranslation must be used within a LanguageProvider');
}
return context;
}
export type { Language, Translations };