added LanguageSelector

interface/src/components/inputs/LanguageSelector.tsx

@@ -0,0 +1,84 @@
+import { type ChangeEventHandler, type FC, useContext } from 'react';
+
+import { MenuItem, TextField } from '@mui/material';
+
+import DEflag from 'i18n/DE.svg';
+import FRflag from 'i18n/FR.svg';
+import GBflag from 'i18n/GB.svg';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SKflag from 'i18n/SK.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+import { I18nContext } from 'i18n/i18n-react';
+import type { Locales } from 'i18n/i18n-types';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
+
+const LanguageSelector: FC = () => {
+  const { setLocale, locale } = useContext(I18nContext);
+
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
+    target
+  }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
+  return (
+    <TextField
+      name="locale"
+      variant="outlined"
+      value={locale}
+      onChange={onLocaleSelected}
+      size="small"
+      select
+    >
+      <MenuItem key="de" value="de">
+        <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;DE
+      </MenuItem>
+      <MenuItem key="en" value="en">
+        <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;EN
+      </MenuItem>
+      <MenuItem key="fr" value="fr">
+        <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;FR
+      </MenuItem>
+      <MenuItem key="it" value="it">
+        <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;IT
+      </MenuItem>
+      <MenuItem key="nl" value="nl">
+        <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;NL
+      </MenuItem>
+      <MenuItem key="no" value="no">
+        <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;NO
+      </MenuItem>
+      <MenuItem key="pl" value="pl">
+        <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;PL
+      </MenuItem>
+      <MenuItem key="sk" value="sk">
+        <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;SK
+      </MenuItem>
+      <MenuItem key="sv" value="sv">
+        <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;SV
+      </MenuItem>
+      <MenuItem key="tr" value="tr">
+        <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+        &nbsp;TR
+      </MenuItem>
+    </TextField>
+  );
+};
+
+export default LanguageSelector;