portfolio-page/src/contexts/LanguageContext.tsx

49 lines
1.5 KiB
TypeScript

import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
import { en, type TextConfig } from '../config/locales/en';
import { de } from '../config/locales/de';
import type { Language } from '../data/types';
interface LanguageContextType {
language: Language;
setLanguage: (lang: Language) => void;
texts: TextConfig;
}
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
/** Derive the language from the URL pathname prefix (/en/… or /de/…). */
export function getLanguageFromPath(pathname: string): Language | null {
if (pathname.startsWith('/en')) return 'en';
if (pathname.startsWith('/de')) return 'de';
return null;
}
export function LanguageProvider({ initialLanguage = 'de', children }: Readonly<{ initialLanguage?: Language; children: ReactNode; }>) {
const [language, setLanguage] = useState<Language>(initialLanguage);
const texts = language === 'de' ? de : en;
const handleSetLanguage = (lang: Language) => {
setLanguage(lang);
document.documentElement.lang = lang;
};
useEffect(() => {
document.documentElement.lang = language;
}, [language]);
return (
<LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage, texts }}>
{children}
</LanguageContext.Provider>
);
}
export function useLanguage() {
const context = useContext(LanguageContext);
if (context === undefined) {
throw new Error('useLanguage must be used within a LanguageProvider');
}
return context;
}