fspecii
c219edb037
- Add I18nContext provider with useI18n hook and localStorage persistence - Add translations.ts with complete strings for English, Chinese, Japanese, Korean - Wrap App in I18nProvider, replace hardcoded toast messages with t() calls - Add language selector to SettingsModal with Globe icon - Add localization credits in About section - Default language: English - Add I18N_USAGE.md documentation
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React, { createContext, useContext, useState, ReactNode } from 'react';
|
|
import { translations, Language, TranslationKey } from '../i18n/translations';
|
|
|
|
interface I18nContextType {
|
|
language: Language;
|
|
setLanguage: (lang: Language) => void;
|
|
t: (key: TranslationKey) => string;
|
|
}
|
|
|
|
const I18nContext = createContext<I18nContextType | undefined>(undefined);
|
|
|
|
export const I18nProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
|
const [language, setLanguage] = useState<Language>(() => {
|
|
const stored = localStorage.getItem('language') as Language;
|
|
return stored === 'zh' || stored === 'en' || stored === 'ja' || stored === 'ko' ? stored : 'en';
|
|
});
|
|
|
|
const handleSetLanguage = (lang: Language) => {
|
|
setLanguage(lang);
|
|
localStorage.setItem('language', lang);
|
|
};
|
|
|
|
const t = (key: TranslationKey): string => {
|
|
return translations[language][key] || key;
|
|
};
|
|
|
|
return (
|
|
<I18nContext.Provider value={{ language, setLanguage: handleSetLanguage, t }}>
|
|
{children}
|
|
</I18nContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useI18n = () => {
|
|
const context = useContext(I18nContext);
|
|
if (!context) {
|
|
throw new Error('useI18n must be used within I18nProvider');
|
|
}
|
|
return context;
|
|
};
|