aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/PreferencesPage.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/settings/PreferencesPage.js')
-rw-r--r--modern/src/settings/PreferencesPage.js47
1 files changed, 47 insertions, 0 deletions
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
new file mode 100644
index 00000000..39b76074
--- /dev/null
+++ b/modern/src/settings/PreferencesPage.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+ Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem,
+} from '@material-ui/core';
+import { useLocalization, useTranslation } from '../LocalizationProvider';
+import OptionsLayout from './OptionsLayout';
+
+const useStyles = makeStyles((theme) => ({
+ container: {
+ marginTop: theme.spacing(2),
+ },
+ details: {
+ flexDirection: 'column',
+ },
+}));
+
+const PreferencesPage = () => {
+ const classes = useStyles();
+ const t = useTranslation();
+
+ const { languages, language, setLanguage } = useLocalization();
+ const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
+
+ return (
+ <OptionsLayout>
+ <Container maxWidth="xs" className={classes.container}>
+ <Accordion defaultExpanded>
+ <AccordionSummary>
+ <Typography variant="subtitle1">
+ {t('sharedPreferences')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails className={classes.details}>
+ <FormControl variant="filled" fullWidth>
+ <InputLabel>{t('loginLanguage')}</InputLabel>
+ <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
+ {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)}
+ </Select>
+ </FormControl>
+ </AccordionDetails>
+ </Accordion>
+ </Container>
+ </OptionsLayout>
+ );
+};
+
+export default PreferencesPage;