oriyo_next/src/shared/language/context/language-provider.tsx
2025-04-26 19:32:41 +05:00

74 lines
1.9 KiB
TypeScript

'use client';
import { createContext, type ReactNode, useEffect, useState } from 'react';
import enTranslations from '../locales/en.json';
import ruTranslations from '../locales/ru.json';
// Define available languages
export const languages = {
en: { name: 'English', flag: '🇬🇧' },
ru: { name: 'Русский', flag: '🇷🇺' },
};
export type Language = keyof typeof languages;
// Define translations type with flat structure
export type Translations = Record<string, string>;
// Load translations
const translations: Record<Language, Translations> = {
en: enTranslations,
ru: ruTranslations,
};
// Create context
type LanguageContextType = {
language: Language;
setLanguage: (lang: Language) => void;
t: (key: string) => string;
};
export const LanguageContext = createContext<LanguageContextType | undefined>(
undefined,
);
// Create provider
export function LanguageProvider({ children }: { children: ReactNode }) {
// Default to Russian, but check localStorage on client
const [language, setLanguageState] = useState<Language>('ru');
useEffect(() => {
// Check if we're in the browser
if (typeof window !== 'undefined') {
const savedLanguage = localStorage.getItem('language') as Language;
if (savedLanguage && languages[savedLanguage]) {
setLanguageState(savedLanguage);
}
}
}, []);
const setLanguage = (lang: Language) => {
setLanguageState(lang);
if (typeof window !== 'undefined') {
localStorage.setItem('language', lang);
}
};
// Translation function for flat structure
const t = (key: string): string => {
if (translations[language][key]) {
return translations[language][key];
}
console.warn(`Translation key not found: ${key}`);
return key;
};
return (
<LanguageContext.Provider value={{ language, setLanguage, t }}>
{children}
</LanguageContext.Provider>
);
}