48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect } from 'react';
|
|
import { translations } from '@/i18n/translations';
|
|
|
|
type Language = 'es' | 'en' | 'fr';
|
|
type TranslationKey = keyof typeof translations.es;
|
|
|
|
interface LanguageContextType {
|
|
language: Language;
|
|
setLanguage: (lang: Language) => void;
|
|
t: (key: TranslationKey) => string;
|
|
}
|
|
|
|
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
|
|
|
export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [language, setLanguageState] = useState<Language>(() => {
|
|
const saved = localStorage.getItem('karibeo-language');
|
|
return (saved as Language) || 'en';
|
|
});
|
|
|
|
const setLanguage = (lang: Language) => {
|
|
setLanguageState(lang);
|
|
localStorage.setItem('karibeo-language', lang);
|
|
};
|
|
|
|
const t = (key: TranslationKey): string => {
|
|
return translations[language][key] || translations.es[key] || key;
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Update document language
|
|
document.documentElement.lang = language;
|
|
}, [language]);
|
|
|
|
return (
|
|
<LanguageContext.Provider value={{ language, setLanguage, t }}>
|
|
{children}
|
|
</LanguageContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useLanguage = () => {
|
|
const context = useContext(LanguageContext);
|
|
if (context === undefined) {
|
|
throw new Error('useLanguage must be used within a LanguageProvider');
|
|
}
|
|
return context;
|
|
}; |