cesnimda
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React, { createContext, useContext, useState } from "react";
|
|
import { translations, TranslationKey, UiLanguage } from "./translations";
|
|
|
|
type TranslationParams = Record<string, string | number>;
|
|
|
|
type Ctx = {
|
|
language: UiLanguage;
|
|
setLanguage: (l: UiLanguage) => void;
|
|
t: (key: TranslationKey, params?: TranslationParams) => string;
|
|
};
|
|
|
|
const I18nContext = createContext<Ctx | null>(null);
|
|
|
|
function interpolate(template: string, params?: TranslationParams) {
|
|
if (!params) return template;
|
|
return template.replace(/\{(\w+)\}/g, (_, key) => String(params[key] ?? `{${key}}`));
|
|
}
|
|
|
|
export function I18nProvider({ children }: { children: React.ReactNode }) {
|
|
const [language, setLanguageState] = useState<UiLanguage>(() => {
|
|
const raw = window.localStorage.getItem("uiLanguage");
|
|
return raw === "no" ? "no" : "en";
|
|
});
|
|
|
|
const setLanguage = (l: UiLanguage) => {
|
|
setLanguageState(l);
|
|
window.localStorage.setItem("uiLanguage", l);
|
|
};
|
|
|
|
const t = (key: TranslationKey, params?: TranslationParams) => interpolate(translations[language][key] ?? translations.en[key], params);
|
|
|
|
return <I18nContext.Provider value={{ language, setLanguage, t }}>{children}</I18nContext.Provider>;
|
|
}
|
|
|
|
export function useI18n() {
|
|
const ctx = useContext(I18nContext);
|
|
if (!ctx) throw new Error("useI18n must be used within I18nProvider");
|
|
return ctx;
|
|
}
|