add i18n feat && Add partial translation

src/components/LanguageSelector.jsx

@@ -0,0 +1,74 @@
+/**
+ * Language Selector Component
+ *
+ * A dropdown component for selecting the application language.
+ * Automatically updates the i18n language and persists to localStorage.
+ *
+ * Props:
+ * @param {boolean} compact - If true, uses compact style (default: false)
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Languages } from 'lucide-react';
+import { languages } from '../i18n/languages';
+
+function LanguageSelector({ compact = false }) {
+  const { i18n, t } = useTranslation('settings');
+
+  const handleLanguageChange = (event) => {
+    const newLanguage = event.target.value;
+    i18n.changeLanguage(newLanguage);
+  };
+
+  // Compact style for QuickSettingsPanel
+  if (compact) {
+    return (
+      <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
+        <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+          <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+          {t('account.language')}
+        </span>
+        <select
+          value={i18n.language}
+          onChange={handleLanguageChange}
+          className="w-[100px] text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+        >
+          {languages.map((lang) => (
+            <option key={lang.value} value={lang.value}>
+              {lang.nativeName}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  // Full style for Settings page
+  return (
+    <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="font-medium text-gray-900 dark:text-gray-100 mb-1">
+            {t('account.languageLabel')}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            {t('account.languageDescription')}
+          </div>
+        </div>
+        <select
+          value={i18n.language}
+          onChange={handleLanguageChange}
+          className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-36"
+        >
+          {languages.map((lang) => (
+            <option key={lang.value} value={lang.value}>
+              {lang.nativeName}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+export default LanguageSelector;