use browser language

Author: camrun91

packages/ui/package.json

@@ -54,6 +54,7 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "i18next": "^26.0.4",
+    "i18next-browser-languagedetector": "^8.2.1",
     "react-i18next": "^17.0.2",
     "tailwind-merge": "3.3.1",
     "tw-animate-css": "1.4.0"

packages/ui/pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import i18next, { type i18n as I18nInstance } from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import en from './locales/en.json';
 
@@ -10,14 +11,16 @@ export const resources = {
 
 const i18n: I18nInstance = i18next.createInstance();
 
-void i18n.use(initReactI18next).init({
-  resources,
-  lng: 'en',
-  defaultNS,
-  fallbackLng: 'en',
-  interpolation: {
-    escapeValue: false, // React already escapes
-  },
-});
+void i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    defaultNS,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // React already escapes
+    },
+  });
 
 export default i18n;