feat: added language switcher

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react';
+import { useCallback } from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  style?: CSSProperties;
+};
+
+export function LanguageSwitcher({ style }: Props) {
+  const { i18n, t } = useTranslation();
+
+  const currentLanguage = i18n.language;
+
+  const handleChange = useCallback(
+    async (newValue: string) => {
+      await i18n.changeLanguage(newValue);
+    },
+    [i18n],
+  );
+
+  return (
+    <IonSelect
+      interface="popover"
+      style={style}
+      value={currentLanguage}
+      onIonChange={async (e) => {
+        await handleChange(e.target.value as string);
+      }}
+    >
+      <IonSelectOption value="en-EN">{t('language.en')}</IonSelectOption>
+      <IonSelectOption value="de-DE">{t('language.de')}</IonSelectOption>
+    </IonSelect>
+  );
+}

src/components/SettingsList.tsx

@@ -0,0 +1,25 @@
+import type { CSSProperties } from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+import { useTranslation } from 'react-i18next';
+import { LanguageSwitcher } from './LanguageSwitcher';
+
+type Props = {
+  style?: CSSProperties;
+};
+
+export function SettingsList({ style }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <IonList style={style}>
+      <IonListHeader>
+        <IonLabel>{t('label.settings')}</IonLabel>
+      </IonListHeader>
+
+      <IonItem>
+        <IonLabel>{t('label.language')}</IonLabel>
+        <LanguageSwitcher />
+      </IonItem>
+    </IonList>
+  );
+}

src/locales/de.json

@@ -25,6 +25,7 @@
   "label.fillAllFields": "Bitte fülle alle Felder aus.",
   "label.formErrorEmptyValues": "Bitte fülle alle Felder aus.",
   "label.formValidationError": "Fehlerhafte Eingabe",
+  "label.language": "Sprache",
   "label.lastlogin": "Letzter Login",
   "label.loading": "Wird geladen",
   "label.location": "Standort",
@@ -55,6 +56,8 @@
   "label.submit": "Absenden",
   "label.title": "Titel",
   "label.yourpicture": "Dein Profilbild",
+  "language.de": "Deutsch",
+  "language.en": "Englisch",
   "monthly": "monatlich",
   "offer": "Angebot",
   "request": "Gesuch",

src/locales/en.json

@@ -25,6 +25,7 @@
   "label.fillAllFields": "Please fill out all fields.",
   "label.formErrorEmptyValues": "Please fill out all fields.",
   "label.formValidationError": "Invalid input",
+  "label.language": "Language",
   "label.lastlogin": "Last login",
   "label.loading": "Loading",
   "label.location": "Location",
@@ -55,6 +56,8 @@
   "label.submit": "Submit",
   "label.title": "Title",
   "label.yourpicture": "Your picture",
+  "language.de": "German",
+  "language.en": "English",
   "monthly": "monthly",
   "offer": "Offer",
   "request": "Request",

src/pages/Settings.tsx

@@ -16,6 +16,7 @@ import { logoGithub } from 'ionicons/icons';
 import { useTranslation } from 'react-i18next';
 import { BackButton } from '../components/BackButton';
 import { Feedback } from '../components/Feedback';
+import { SettingsList } from '../components/SettingsList';
 import { UserProfile } from '../components/UserProfile';
 import { isNative } from '../utils/isNative';
 
@@ -67,6 +68,8 @@ export function Settings() {
       <IonContent>
         <UserProfile />
 
+        <SettingsList style={{ marginBottom: '2rem' }} />
+
         <div style={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
           <Feedback />