Merge branch 'CodeForBoulder:main' into dynamic-page-titles

Author: dschwindt

packages/common/src/i18n/en.ts

@@ -66,6 +66,7 @@ export default {
       saturday: "Saturday",
     },
     close: "Close",
+    selectLanguage: "Select language",
   },
   hotlines: {
     nationalSuicidePreventionLifeline: {

packages/common/src/i18n/es.ts

@@ -66,6 +66,7 @@ export default {
       saturday: "Sábado",
     },
     close: "Final",
+    selectLanguage: "Seleccionar idioma",
   },
   hotlines: {
     nationalSuicidePreventionLifeline: {

packages/web/src/components/Header.tsx

@@ -10,7 +10,9 @@ import MenuDrawer from "./MenuDrawer";
 import MenuIcon from "@material-ui/icons/Menu";
 import Temperature from "./Temperature";
 import Toolbar from "@material-ui/core/Toolbar";
+import TranslationSelect from "./TranslationSelect";
 import Typography from "@material-ui/core/Typography";
+
 import { useTranslation } from "react-i18next";
 
 const Header = () => {
@@ -29,14 +31,19 @@ const Header = () => {
                   <MenuIcon />
                 </IconButton>
               </Grid>
-              <Grid alignItems="center" justify="flex-end" container item>
-                <Grid item component={Temperature} />
+              <Grid alignItems="center" justify="flex-start" container item>
                 <Grid item>
                   <Link to="/">
                     <Box component={Logo} height={40} width="auto" />
                   </Link>
                 </Grid>
               </Grid>
+              <Grid alignItems="center" justify="flex-end" container item>
+                <Grid item component={Temperature} xs={6} />
+                <Grid item xs={6}>
+                  <TranslationSelect />
+                </Grid>
+              </Grid>
             </Grid>
           </Container>
         </Toolbar>

packages/web/src/components/ResourceCard.tsx

@@ -12,7 +12,6 @@ import { TResource } from "@upswyng/types";
 import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import Typography from "@material-ui/core/Typography";
 import { getNextOpenText } from "../utils/schedule";
-
 import makeStyles from "@material-ui/styles/makeStyles";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";

packages/web/src/components/TranslationSelect.tsx

@@ -0,0 +1,53 @@
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+import MenuItem from "@material-ui/core/MenuItem";
+import React from "react";
+import Select from "@material-ui/core/Select";
+import { Theme } from "@material-ui/core/styles";
+import i18n from "../i18n";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    formControl: {
+      margin: theme.spacing(1),
+      minWidth: 120,
+    },
+    selectEmpty: {
+      marginTop: theme.spacing(2),
+    },
+  })
+);
+
+const TranslationSelect = () => {
+  const { t } = useTranslation("glossary");
+  const classes = useStyles();
+  const [translationUsed, setTranslationUsed] = React.useState("en");
+
+  const changeTranslation = (translation: string) => {
+    i18n.changeLanguage(translation);
+  };
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    const translationLanguage = event.target.value as string;
+    setTranslationUsed(translationLanguage);
+    changeTranslation(translationLanguage);
+  };
+
+  return (
+    <div>
+      <FormControl className={classes.formControl}>
+        <Select
+          value={translationUsed}
+          onChange={handleChange}
+          aria-label={t("selectLanguage")}
+        >
+          <MenuItem value="en">English</MenuItem>
+          <MenuItem value="es">Español</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+
+export default TranslationSelect;