60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
'use client';
|
||
|
|
import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
|
||
|
|
import deMessages from '@/messages/de.json';
|
||
|
|
import enMessages from '@/messages/en.json';
|
||
|
|
|
||
|
|
export type Locale = 'de' | 'en';
|
||
|
|
|
||
|
|
interface Messages {
|
||
|
|
[key: string]: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const messageMap: Record<Locale, Messages> = {
|
||
|
|
de: deMessages as Messages,
|
||
|
|
en: enMessages as Messages,
|
||
|
|
};
|
||
|
|
|
||
|
|
interface I18nContextValue {
|
||
|
|
locale: Locale;
|
||
|
|
setLocale: (locale: Locale) => void;
|
||
|
|
t: (key: string, params?: Record<string, string>) => string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const I18nContext = createContext<I18nContextValue | null>(null);
|
||
|
|
|
||
|
|
export function I18nProvider({ children, initialLocale = 'de' }: { children: ReactNode; initialLocale?: Locale }) {
|
||
|
|
const [locale, setLocaleState] = useState<Locale>(initialLocale);
|
||
|
|
|
||
|
|
const setLocale = useCallback((newLocale: Locale) => {
|
||
|
|
setLocaleState(newLocale);
|
||
|
|
if (typeof document !== 'undefined') {
|
||
|
|
document.documentElement.lang = newLocale;
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const t = useCallback((key: string, params?: Record<string, string>) => {
|
||
|
|
const messages = messageMap[locale];
|
||
|
|
let message = messages[key] || key;
|
||
|
|
if (params) {
|
||
|
|
for (const [param, value] of Object.entries(params)) {
|
||
|
|
message = message.replace(new RegExp(`\{${param}\}`, 'g'), value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return message;
|
||
|
|
}, [locale]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<I18nContext.Provider value={{ locale, setLocale, t }}>
|
||
|
|
{children}
|
||
|
|
</I18nContext.Provider>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function useI18n(): I18nContextValue {
|
||
|
|
const ctx = useContext(I18nContext);
|
||
|
|
if (!ctx) {
|
||
|
|
throw new Error('useI18n must be used within I18nProvider');
|
||
|
|
}
|
||
|
|
return ctx;
|
||
|
|
}
|