Test-Generate-123/Template-02/src/contexts/LanguageContext.tsx
2026-05-13 22:38:24 +00:00

52 lines
1.6 KiB
TypeScript

import React, { createContext, useContext, useState, useEffect } from 'react';
type Language = 'pt-br' | 'en' | 'es';
interface LanguageContextType {
lang: Language;
setLang: (lang: Language) => void;
translate: (text: any, context?: string, isObject?: boolean) => Promise<any>;
isTranslating: boolean;
}
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [lang, setLang] = useState<Language>(() => {
const saved = localStorage.getItem('app-lang');
return (saved as Language) || 'pt-br';
});
useEffect(() => {
localStorage.setItem('app-lang', lang);
document.documentElement.lang = lang;
// Trigger Google Translate Widget
const triggerGoogleTranslate = () => {
const select = document.querySelector('.goog-te-combo') as HTMLSelectElement;
if (select) {
const googleLangCode = lang === 'pt-br' ? 'pt' : lang;
select.value = googleLangCode;
select.dispatchEvent(new Event('change'));
}
};
// Delay a bit to ensure the widget is loaded
const timer = setTimeout(triggerGoogleTranslate, 1000);
return () => clearTimeout(timer);
}, [lang]);
return (
<LanguageContext.Provider value={{ lang, setLang, translate: async (t) => t, isTranslating: false }}>
{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;
};