React translations

frontend/src/i18n.ts

@@ -0,0 +1,87 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+
+// Define supported languages (based on your existing translations)
+export const supportedLanguages = {
+  'en-GB': 'English (UK)',
+  'en-US': 'English (US)',
+  'ar-AR': 'العربية',
+  'az-AZ': 'Azərbaycan Dili',
+  'bg-BG': 'Български',
+  'ca-CA': 'Català',
+  'cs-CZ': 'Česky',
+  'da-DK': 'Dansk',
+  'de-DE': 'Deutsch',
+  'el-GR': 'Ελληνικά',
+  'es-ES': 'Español',
+  'eu-ES': 'Euskara',
+  'fa-IR': 'فارسی',
+  'fr-FR': 'Français',
+  'ga-IE': 'Gaeilge',
+  'hi-IN': 'हिंदी',
+  'hr-HR': 'Hrvatski',
+  'hu-HU': 'Magyar',
+  'id-ID': 'Bahasa Indonesia',
+  'it-IT': 'Italiano',
+  'ja-JP': '日本語',
+  'ko-KR': '한국어',
+  'ml-ML': 'മലയാളം',
+  'nl-NL': 'Nederlands',
+  'no-NB': 'Norsk',
+  'pl-PL': 'Polski',
+  'pt-BR': 'Português (Brasil)',
+  'pt-PT': 'Português',
+  'ro-RO': 'Română',
+  'ru-RU': 'Русский',
+  'sk-SK': 'Slovensky',
+  'sl-SI': 'Slovenščina',
+  'sr-LATN-RS': 'Srpski',
+  'sv-SE': 'Svenska',
+  'th-TH': 'ไทย',
+  'tr-TR': 'Türkçe',
+  'uk-UA': 'Українська',
+  'vi-VN': 'Tiếng Việt',
+  'zh-BO': 'བོད་ཡིག',
+  'zh-CN': '简体中文',
+  'zh-TW': '繁體中文',
+};
+
+// RTL languages (based on your existing language.direction property)
+export const rtlLanguages = ['ar-AR', 'fa-IR'];
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en-GB',
+    debug: process.env.NODE_ENV === 'development',
+    
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+    
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+    
+    detection: {
+      order: ['localStorage', 'navigator', 'htmlTag'],
+      caches: ['localStorage'],
+    },
+    
+    react: {
+      useSuspense: false, // Set to false to avoid suspense issues with SSR
+    },
+  });
+
+// Set document direction based on language
+i18n.on('languageChanged', (lng) => {
+  const isRTL = rtlLanguages.includes(lng);
+  document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+  document.documentElement.lang = lng;
+});
+
+export default i18n;