add chips as labels (#26)

kitsteam · Dec 29, 2023 · d595353 · d595353
1 parent f945ef4
commit d595353
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 3 deletions.
diff --git a/src/components/Start/Start.tsx b/src/components/Start/Start.tsx
@@ -7,6 +7,12 @@ import TextField from '@mui/material/TextField';
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from 'react-i18next';
+import { Chip, styled, Paper } from '@mui/material';
+
+const ListItem = styled('li')(({ theme }) => ({
+  margin: theme.spacing(0.5),
+}));
+
 
 const Start: React.FC = () => {
   const [windowInnerHeight, setWindowInnerHeight] = React.useState(window.innerHeight);
@@ -33,6 +39,21 @@ const Start: React.FC = () => {
     value ? navigate({ pathname: '/search', search: query }) : navigate({ search: query });
   }, [value, navigate]);
 
+  const onChipPress = (label: string) => {
+    const query = '?' + new URLSearchParams({ q: label.trim() }).toString()
+    navigate({ pathname: '/search', search: query })
+  };
+
+  const createChipLabels = (): React.ReactElement[] => {
+    return ['food', 'furniture', 'animals', 'plants', 'family', 'school', 'leisure_time', 'schooling_material', 'seasons'].map((categoryString) => {
+      return (
+        <ListItem>
+          <Chip color="secondary" label={t(`search.example.${categoryString}`)} variant="outlined" onClick={() => onChipPress(t(`search.example.${categoryString}`))}></Chip>
+        </ListItem>
+      )
+    })
+  }
+
   return (
     <div>
       <Grid container spacing={0} direction="row" alignItems="center">
@@ -106,6 +127,22 @@ const Start: React.FC = () => {
                       {t('search.action')}
                     </Button>
                 </Grid>
+                <Grid item xs={12}>
+                  <Paper
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'left',
+                      flexWrap: 'wrap',
+                      listStyle: 'none',
+                      boxShadow: 'none',
+                      p: 0.5,
+                      m: 0,
+                    }}
+                    component="ul"
+                  >
+                    { createChipLabels() }
+                  </Paper>
+                </Grid>
               </Grid>
           </form>
 

diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
@@ -74,7 +74,18 @@
     "result": "Es wurde ein Piktogramm bei der Suche nach \"{{query}}\" gefunden.",
     "result_plural": "Es wurden {{count}} Piktogramme bei der Suche nach \"{{query}}\" gefunden.",
     "displayNew": "Es werden die {{number}} neusten Piktogramme angezeigt.",
-    "license": "Sergio Palao (Urheber), ARASAAC (<1>arasaac.org</1>), Regierung von Aragón in Spanien (Eigentümer), <3>CC BY-SA-NC 4.0</3>"
+    "license": "Sergio Palao (Urheber), ARASAAC (<1>arasaac.org</1>), Regierung von Aragón in Spanien (Eigentümer), <3>CC BY-SA-NC 4.0</3>",
+    "example" : {
+      "food": "Lebensmittel",
+      "animals": "Tiere",
+      "furniture": "Möbel",
+      "plants": "Pflanzen",
+      "leisure_time": "Freizeit",
+      "seasons": "Jahreszeiten",
+      "family": "Familie",
+      "school": "Schule",
+      "schooling_material": "Lehrmaterial"
+    }
   },
   "category": {
     "core-vocabulary": "Grundwortschatz",

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -73,7 +73,18 @@
     "result": "We found one pictogram for \"{{query}}\".",
     "result_plural": "We found {{count}} pictograms for \"{{query}}\".",
     "displayNew": "Below you find the latest {{number}} pictograms.",
-    "license": "Sergio Palao (author), ARASAAC (<1>arasaac.org</1>), Government of Aragón in Spain (owner), <3>CC BY-SA-NC 4.0</3>."
+    "license": "Sergio Palao (author), ARASAAC (<1>arasaac.org</1>), Government of Aragón in Spain (owner), <3>CC BY-SA-NC 4.0</3>.",
+    "example" : {
+      "food": "food",
+      "animals": "animals",
+      "furniture": "furniture",
+      "plants": "plants",
+      "leisure_time": "leisure time",
+      "seasons": "seasons",
+      "family": "family",
+      "school": "school",
+      "schooling_material": "schooling material"
+    }
   },
   "category": {
     "core-vocabulary": "",

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -73,7 +73,18 @@
     "result": "Hemos encontrado un pictograma relativo a \"{{query}}\".",
     "result_plural": "Hemos encontrado {{count}} pictogramas relativos a \"{{query}}\".",
     "displayNew": "En la parte inferior te mostramos los últimos {{number}} pictogramas.",
-    "license": "Los símbolos pictográficos utilizados son propiedad del Gobierno de Aragón y han sido creados por Sergio Palao para <1>ARASAAC</1>, que los distribuye bajo Licencia Creative Commons <3>BY-NC-SA 4.0</3>."
+    "license": "Los símbolos pictográficos utilizados son propiedad del Gobierno de Aragón y han sido creados por Sergio Palao para <1>ARASAAC</1>, que los distribuye bajo Licencia Creative Commons <3>BY-NC-SA 4.0</3>.",
+    "example" : {
+      "food": "Comestibles",
+      "animals": "Animales",
+      "furniture": "Muebles",
+      "plants": "Planta",
+      "leisure_time": "Ocio",
+      "seasons": "Estaciones",
+      "family": "Familia",
+      "school": "Escuela",
+      "schooling_material": "Material de enseñanza"
+    }
   },
   "category": {
     "core-vocabulary": "",