52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
|
import {createBrowserRouter, RouterProvider} from "react-router-dom"
|
||
|
|
import Station from "./Station"
|
||
|
|
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@mui/material"
|
||
|
|
import React, {useMemo} from "react"
|
||
|
|
import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
|
||
|
|
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
|
||
|
|
import 'dayjs/locale/fr'
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const router = createBrowserRouter([
|
||
|
|
{
|
||
|
|
path: "/",
|
||
|
|
element: <div>Hello World!</div>
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "/station/:stopId",
|
||
|
|
element: <Station />
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||
|
|
const theme = useMemo(
|
||
|
|
() =>
|
||
|
|
createTheme({
|
||
|
|
palette: {
|
||
|
|
mode: prefersDarkMode ? 'dark' : 'light',
|
||
|
|
sncf: {
|
||
|
|
departures: {
|
||
|
|
dark: "#003A79",
|
||
|
|
light: "#0064AB",
|
||
|
|
},
|
||
|
|
arrivals: {
|
||
|
|
dark: "#1F5628",
|
||
|
|
light: "#187936",
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
[prefersDarkMode],
|
||
|
|
);
|
||
|
|
|
||
|
|
return <>
|
||
|
|
<ThemeProvider theme={theme}>
|
||
|
|
<CssBaseline />
|
||
|
|
<LocalizationProvider dateAdapter={AdapterDayjs} localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText} adapterLocale="fr">
|
||
|
|
<RouterProvider router={router} />
|
||
|
|
</LocalizationProvider>
|
||
|
|
</ThemeProvider>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|