diff options
Diffstat (limited to 'src/pages/Settings.tsx')
| -rw-r--r-- | src/pages/Settings.tsx | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index e4a1a31..1ad15ab 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -2,7 +2,7 @@ import { useApp } from "../AppContext"; import "../styles/Settings.css"; export function Settings() { - const { theme, setTheme, tableStyle, setTableStyle } = useApp(); + const { theme, setTheme, tableStyle, setTableStyle, mapPositionMode, setMapPositionMode } = useApp(); return ( <div className="about-page"> @@ -15,20 +15,25 @@ export function Settings() { <h2>Ajustes</h2> <div className="settings-content-inline"> <label htmlFor="theme" className="form-label-inline">Modo:</label> - <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value as "light" | "dark")} - style={{ backgroundColor: theme === "dark" ? "#333" : "#fff", color: theme === "dark" ? "#fff" : "#000" }}> + <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value as "light" | "dark")}> <option value="light">Claro</option> <option value="dark">Oscuro</option> </select> </div> <div className="settings-content-inline"> <label htmlFor="tableStyle" className="form-label-inline">Estilo de tabla:</label> - <select id="tableStyle" className="form-select-inline" value={tableStyle} onChange={(e) => setTableStyle(e.target.value as "regular" | "grouped")} - style={{ backgroundColor: theme === "dark" ? "#333" : "#fff", color: theme === "dark" ? "#fff" : "#000" }}> + <select id="tableStyle" className="form-select-inline" value={tableStyle} onChange={(e) => setTableStyle(e.target.value as "regular" | "grouped")}> <option value="regular">Mostrar por orden</option> <option value="grouped">Agrupar por línea</option> </select> </div> + <div className="settings-content-inline"> + <label htmlFor="mapPositionMode" className="form-label-inline">Posición del mapa:</label> + <select id="mapPositionMode" className="form-select-inline" value={mapPositionMode} onChange={e => setMapPositionMode(e.target.value as 'gps' | 'last')}> + <option value="gps">Posición GPS</option> + <option value="last">Donde lo dejé</option> + </select> + </div> <details className="form-details"> <summary>¿Qué significa esto?</summary> <p> @@ -44,16 +49,16 @@ export function Settings() { </section> <h2>Créditos</h2> <p> - <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link" style={{ color: theme === "dark" ? "#bbb" : "#000" }}> + <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link" rel="nofollow noreferrer noopener"> Código en GitHub </a> - - Desarrollado por <a href="https://www.costas.dev" className="about-link" style={{ color: theme === "dark" ? "#bbb" : "#000" }}> + Desarrollado por <a href="https://www.costas.dev" className="about-link" rel="nofollow noreferrer noopener"> Ariel Costas </a> </p> <p> - Datos obtenidos de <a href="https://datos.vigo.org" style={{ color: theme === "dark" ? "#bbb" : "#000" }}>datos.vigo.org</a> bajo - licencia <a href="https://opendefinition.org/licenses/odc-by/" style={{ color: theme === "dark" ? "#bbb" : "#000" }}>Open Data Commons Attribution License</a> + Datos obtenidos de <a href="https://datos.vigo.org" className="about-link" rel="nofollow noreferrer noopener">datos.vigo.org</a> bajo + licencia <a href="https://opendefinition.org/licenses/odc-by/" className="about-link" rel="nofollow noreferrer noopener">Open Data Commons Attribution License</a> </p> </div> ) |