Add internationalization support with i18next and language selector component

src/i18n.ts

@@ -0,0 +1,36 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+import en from './locales/en.json'
+import zh from './locales/zh.json'
+
+const resources = {
+  en: {
+    translation: en
+  },
+  zh: {
+    translation: zh
+  }
+}
+
+i18n
+  .use(LanguageDetector) // Detect user language
+  .use(initReactI18next) // Pass i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: 'en', // Fallback to English if detection fails
+    debug: false,
+
+    interpolation: {
+      escapeValue: false // React already does escaping
+    },
+
+    detection: {
+      order: ['localStorage', 'navigator', 'htmlTag'],
+      lookupLocalStorage: 'language',
+      caches: ['localStorage']
+    }
+  })
+
+export default i18n