feat: i18n add settings page

frontend/src/components/Bar/Bar.jsx

@@ -48,7 +48,7 @@ function Bar() {
   const menuItems = [
     // TODO: add settings page
     {
-      name: "Settings",
+      name: t("settings"),
       to: "/settings",
     },
     ...(!disabledAuth

frontend/src/components/SettingsComponent/SettingsComponent.jsx

@@ -0,0 +1,43 @@
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Checkbox,
+  Divider,
+  Grid,
+  Typography,
+  TextField,
+  Select,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import API from "utils/API";
+import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
+
+import { useTranslation } from "react-i18next";
+
+function SettingsComponent() {
+  const { t, i18n } = useTranslation();
+
+  const handleChange = () => (event) => {
+    i18n.changeLanguage(event.target.value);
+  };
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>{t("language")}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Grid item>
+          <Select native value={i18n.language} onChange={handleChange()}>
+            <option value={"en"}>English</option>
+            <option value={"es-ES"}>Spanish</option>
+          </Select>
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default SettingsComponent;

frontend/src/components/SettingsComponent/index.jsx

@@ -0,0 +1 @@
+export { default } from "./SettingsComponent";