diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/About.tsx | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 0000000..d286fb1 --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,50 @@ +import { Moon, Sun } from "lucide-react"; +import { useEffect, useState } from "react"; + +export function About() { + const [theme, setTheme] = useState<'light' | 'dark'>(() => { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme) { + return savedTheme as 'light' | 'dark'; + } + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + return prefersDark ? 'dark' : 'light'; + }); + + useEffect(() => { + document.documentElement.setAttribute('data-theme', theme); + localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + return ( + <div className="about-page"> + <h1 className="page-title">Sobre UrbanoVigo Web</h1> + <p className="about-description"> + Aplicación web para encontrar paradas y tiempos de llegada de los autobuses + urbanos de Vigo, España. + </p> + <button className="form-button" onClick={toggleTheme}> + {theme === 'light' ? + <><Moon size={24} /> Usar modo oscuro</> : + <><Sun size={24} /> Usar modo claro</> + } + </button> + <p> + <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link"> + Código en GitHub + </a> - + Desarrollado por <a href="https://www.costas.dev" className="about-link"> + Ariel Costas + </a> + </p> + <p> + Datos obtenidos de <a href="https://datos.vigo.org">datos.vigo.org</a> bajo + licencia <a href="https://opendefinition.org/licenses/odc-by/">Open Data Commons Attribution License</a> + </p> + </div> + ) +}
\ No newline at end of file |