diff options
Diffstat (limited to 'src/frontend/app/routes/settings.tsx')
| -rw-r--r-- | src/frontend/app/routes/settings.tsx | 192 |
1 files changed, 124 insertions, 68 deletions
diff --git a/src/frontend/app/routes/settings.tsx b/src/frontend/app/routes/settings.tsx index e657c03..c08b2c9 100644 --- a/src/frontend/app/routes/settings.tsx +++ b/src/frontend/app/routes/settings.tsx @@ -3,74 +3,130 @@ import "./settings.css"; import { useTranslation } from "react-i18next"; export default function Settings() { - const { t, i18n } = useTranslation(); - const { theme, setTheme, tableStyle, setTableStyle, mapPositionMode, setMapPositionMode } = useApp(); + const { t, i18n } = useTranslation(); + const { + theme, + setTheme, + tableStyle, + setTableStyle, + mapPositionMode, + setMapPositionMode, + } = useApp(); - return ( - <div className="page-container"> - <h1 className="page-title">{t('about.title')}</h1> - <p className="about-description"> - {t('about.description')} - </p> - <section className="settings-section"> - <h2>{t('about.settings')}</h2> - <div className="settings-content-inline"> - <label htmlFor="theme" className="form-label-inline">{t('about.theme')}</label> - <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value as "light" | "dark")}> - <option value="light">{t('about.theme_light')}</option> - <option value="dark">{t('about.theme_dark')}</option> - </select> - </div> - <div className="settings-content-inline"> - <label htmlFor="tableStyle" className="form-label-inline">{t('about.table_style')}</label> - <select id="tableStyle" className="form-select-inline" value={tableStyle} onChange={(e) => setTableStyle(e.target.value as "regular" | "grouped")}> - <option value="regular">{t('about.table_style_regular')}</option> - <option value="grouped">{t('about.table_style_grouped')}</option> - </select> - </div> - <div className="settings-content-inline"> - <label htmlFor="mapPositionMode" className="form-label-inline">{t('about.map_position_mode')}</label> - <select id="mapPositionMode" className="form-select-inline" value={mapPositionMode} onChange={e => setMapPositionMode(e.target.value as 'gps' | 'last')}> - <option value="gps">{t('about.map_position_gps')}</option> - <option value="last">{t('about.map_position_last')}</option> - </select> - </div> - <div className="settings-content-inline"> - <label htmlFor="language" className="form-label-inline">Idioma:</label> - <select - id="language" - className="form-select-inline" - value={i18n.language} - onChange={e => i18n.changeLanguage(e.target.value)} - > - <option value="es-ES">Español</option> - <option value="gl-ES">Galego</option> - <option value="en-GB">English</option> - </select> - </div> - <details className="form-details"> - <summary>{t('about.details_summary')}</summary> - <p>{t('about.details_table')}</p> - <dl> - <dt>{t('about.table_style_regular')}</dt> - <dd>{t('about.details_regular')}</dd> - <dt>{t('about.table_style_grouped')}</dt> - <dd>{t('about.details_grouped')}</dd> - </dl> - </details> - </section> - <h2>{t('about.credits')}</h2> - <p> - <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link" rel="nofollow noreferrer noopener"> - {t('about.github')} - </a> - - {t('about.developed_by')} <a href="https://www.costas.dev" className="about-link" rel="nofollow noreferrer noopener"> - Ariel Costas - </a> - </p> - <p> - {t('about.data_source_prefix')} <a href="https://datos.vigo.org" className="about-link" rel="nofollow noreferrer noopener">datos.vigo.org</a> {t('about.data_source_middle')} <a href="https://opendefinition.org/licenses/odc-by/" className="about-link" rel="nofollow noreferrer noopener">Open Data Commons Attribution License</a> - </p> + return ( + <div className="page-container"> + <h1 className="page-title">{t("about.title")}</h1> + <p className="about-description">{t("about.description")}</p> + <section className="settings-section"> + <h2>{t("about.settings")}</h2> + <div className="settings-content-inline"> + <label htmlFor="theme" className="form-label-inline"> + {t("about.theme")} + </label> + <select + id="theme" + className="form-select-inline" + value={theme} + onChange={(e) => setTheme(e.target.value as "light" | "dark")} + > + <option value="light">{t("about.theme_light")}</option> + <option value="dark">{t("about.theme_dark")}</option> + </select> </div> - ) + <div className="settings-content-inline"> + <label htmlFor="tableStyle" className="form-label-inline"> + {t("about.table_style")} + </label> + <select + id="tableStyle" + className="form-select-inline" + value={tableStyle} + onChange={(e) => + setTableStyle(e.target.value as "regular" | "grouped") + } + > + <option value="regular">{t("about.table_style_regular")}</option> + <option value="grouped">{t("about.table_style_grouped")}</option> + </select> + </div> + <div className="settings-content-inline"> + <label htmlFor="mapPositionMode" className="form-label-inline"> + {t("about.map_position_mode")} + </label> + <select + id="mapPositionMode" + className="form-select-inline" + value={mapPositionMode} + onChange={(e) => + setMapPositionMode(e.target.value as "gps" | "last") + } + > + <option value="gps">{t("about.map_position_gps")}</option> + <option value="last">{t("about.map_position_last")}</option> + </select> + </div> + <div className="settings-content-inline"> + <label htmlFor="language" className="form-label-inline"> + Idioma: + </label> + <select + id="language" + className="form-select-inline" + value={i18n.language} + onChange={(e) => i18n.changeLanguage(e.target.value)} + > + <option value="es-ES">Español</option> + <option value="gl-ES">Galego</option> + <option value="en-GB">English</option> + </select> + </div> + <details className="form-details"> + <summary>{t("about.details_summary")}</summary> + <p>{t("about.details_table")}</p> + <dl> + <dt>{t("about.table_style_regular")}</dt> + <dd>{t("about.details_regular")}</dd> + <dt>{t("about.table_style_grouped")}</dt> + <dd>{t("about.details_grouped")}</dd> + </dl> + </details> + </section> + <h2>{t("about.credits")}</h2> + <p> + <a + href="https://github.com/arielcostas/urbanovigo-web" + className="about-link" + rel="nofollow noreferrer noopener" + > + {t("about.github")} + </a>{" "} + -{t("about.developed_by")}{" "} + <a + href="https://www.costas.dev" + className="about-link" + rel="nofollow noreferrer noopener" + > + Ariel Costas + </a> + </p> + <p> + {t("about.data_source_prefix")}{" "} + <a + href="https://datos.vigo.org" + className="about-link" + rel="nofollow noreferrer noopener" + > + datos.vigo.org + </a>{" "} + {t("about.data_source_middle")}{" "} + <a + href="https://opendefinition.org/licenses/odc-by/" + className="about-link" + rel="nofollow noreferrer noopener" + > + Open Data Commons Attribution License + </a> + </p> + </div> + ); } |