diff --git a/src/components/Start/Start.tsx b/src/components/Start/Start.tsx index cc76f67..ec4a8bc 100644 --- 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 ( + + onChipPress(t(`search.example.${categoryString}`))}> + + ) + }) + } + return (
@@ -106,6 +127,22 @@ const Start: React.FC = () => { {t('search.action')} + + + { createChipLabels() } + + diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index e037221..0d6793d 100644 --- 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), Regierung von Aragón in Spanien (Eigentümer), <3>CC BY-SA-NC 4.0" + "license": "Sergio Palao (Urheber), ARASAAC (<1>arasaac.org), Regierung von Aragón in Spanien (Eigentümer), <3>CC BY-SA-NC 4.0", + "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 index 4d452f1..1e510bc 100644 --- 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), Government of Aragón in Spain (owner), <3>CC BY-SA-NC 4.0." + "license": "Sergio Palao (author), ARASAAC (<1>arasaac.org), Government of Aragón in Spain (owner), <3>CC BY-SA-NC 4.0.", + "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 index 78d528f..9eeadb7 100644 --- 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, que los distribuye bajo Licencia Creative Commons <3>BY-NC-SA 4.0." + "license": "Los símbolos pictográficos utilizados son propiedad del Gobierno de Aragón y han sido creados por Sergio Palao para <1>ARASAAC, que los distribuye bajo Licencia Creative Commons <3>BY-NC-SA 4.0.", + "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": "",