feat: i18n

src/features/settings/SettingsPage.tsx

@@ -1,9 +1,25 @@
-import { Window } from '@olly/modern-sk';
+import { useTranslation } from 'react-i18next';
+import { Window, SegmentedControl } from '@olly/modern-sk';
+import { SUPPORTED_LANGUAGES, setLanguage } from '../../i18n';
+
 export function SettingsPage() {
+  const { t, i18n } = useTranslation();
+
   return (
-    <div style={{ padding: '1.5rem' }}>
-      <Window title="Settings">
-        <p style={{ color: 'var(--color-text-2)' }}>Coming soon</p>
+    <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+      <Window title={t('pages.settings')}>
+        <div style={{ padding: '0.75rem 0', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <span style={{ fontSize: '0.875rem', color: 'var(--color-text-2)', minWidth: '6rem' }}>
+              Language
+            </span>
+            <SegmentedControl
+              value={i18n.language}
+              onValueChange={setLanguage}
+              items={SUPPORTED_LANGUAGES.map((l) => ({ value: l.code, label: l.label }))}
+            />
+          </div>
+        </div>
       </Window>
     </div>
   );