Added language selection and translation files

frontend/src/components/LanguageSelector.tsx

@@ -0,0 +1,56 @@
+import { useTranslation } from 'react-i18next'
+import { LANGUAGES, type LanguageCode } from '@/i18n'
+
+interface LanguageSelectorProps {
+  /** Additional CSS classes */
+  className?: string
+  /** Compact mode - shows only flag and code */
+  compact?: boolean
+}
+
+/**
+ * A dropdown component for selecting the application language.
+ * Uses i18next for language switching and persists choice to localStorage.
+ */
+export default function LanguageSelector({ className = '', compact = false }: LanguageSelectorProps) {
+  const { i18n, t } = useTranslation('common')
+
+  const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newLang = e.target.value as LanguageCode
+    i18n.changeLanguage(newLang)
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <select
+        value={i18n.language}
+        onChange={handleLanguageChange}
+        className="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-1.5 text-sm text-gray-700 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent cursor-pointer"
+        title={t('selectLanguage')}
+        aria-label={t('selectLanguage')}
+      >
+        {LANGUAGES.map((lang) => (
+          <option key={lang.code} value={lang.code}>
+            {compact ? `${lang.flag} ${lang.code.toUpperCase()}` : `${lang.flag} ${lang.label}`}
+          </option>
+        ))}
+      </select>
+      {/* Custom dropdown arrow */}
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+        <svg
+          className="h-4 w-4 text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}