48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import React, { createContext, useContext, useState, ReactNode } from "react";
|
|
import { translations, Language, TranslationModule, TranslationKey } from "@/translations";
|
|
|
|
type LanguageContextType = {
|
|
language: Language;
|
|
setLanguage: (language: Language) => void;
|
|
t: <M extends TranslationModule>(key: string, module?: M) => string;
|
|
};
|
|
|
|
// ❗ Create the context with `undefined` to enforce provider usage
|
|
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
|
|
|
// ✅ Stable custom hook
|
|
export const useLanguage = () => {
|
|
const context = useContext(LanguageContext);
|
|
if (!context) {
|
|
throw new Error("useLanguage must be used within a LanguageProvider");
|
|
}
|
|
return context;
|
|
};
|
|
|
|
export const LanguageProvider = ({ children }: { children: ReactNode }) => {
|
|
const [language, setLanguage] = useState<Language>("en");
|
|
|
|
const t = <M extends TranslationModule>(key: string, module?: M): string => {
|
|
if (module) {
|
|
const translatedValue = translations[language][module][key as TranslationKey<M>];
|
|
return typeof translatedValue === "string" ? translatedValue : key;
|
|
}
|
|
|
|
for (const mod in translations[language]) {
|
|
const moduleKey = mod as TranslationModule;
|
|
const translatedValue = translations[language][moduleKey][key as any];
|
|
if (translatedValue && typeof translatedValue === "string") {
|
|
return translatedValue;
|
|
}
|
|
}
|
|
|
|
return key;
|
|
};
|
|
|
|
return (
|
|
<LanguageContext.Provider value={{ language, setLanguage, t }}>
|
|
{children}
|
|
</LanguageContext.Provider>
|
|
);
|
|
};
|