You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.7 KiB
86 lines
2.7 KiB
import { useState } from 'react';
|
|
import './App.css';
|
|
import deLocale from 'date-fns/locale/de';
|
|
import { AppBar, Box, Button, createTheme, CssBaseline, Paper, ThemeProvider, Toolbar, Typography } from '@mui/material';
|
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
import { Todos } from './components/Todos';
|
|
import { Dinos } from './components/Dinos';
|
|
import { Schedule } from './components/Schedule';
|
|
|
|
const theme = createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
primary: {
|
|
main: '#aa00ff',
|
|
},
|
|
secondary: {
|
|
main: '#00b0ff',
|
|
},
|
|
},
|
|
});
|
|
|
|
function Calendar(){
|
|
return(
|
|
<Typography variant="h3">Calendar</Typography>
|
|
)
|
|
}
|
|
|
|
function Overview(){
|
|
return (
|
|
<div style={{display: "flex", flexGrow: 1, flexDirection: "column", height: "100%", maxHeight: "100%"}}>
|
|
<div><Typography variant="h2">Overview</Typography></div>
|
|
<Box sx={{display: "flex", flexGrow: 1, justifyContent: "space-evenly", gap: 4, height: "100%", minHeight: 0}}>
|
|
<Paper sx={{overflowY: "auto", width: "100%", padding: 2, height: "calc(100% - 32px)"}}><Todos/></Paper>
|
|
<Box sx={{width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-evenly"}}>
|
|
<Calendar/>
|
|
<Schedule/>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const pages = ['Overview', 'Todos', 'Calendar', 'Dinos'];
|
|
|
|
function App() {
|
|
const [page,setPage] = useState<string>("Overview");
|
|
return (
|
|
<>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline/>
|
|
<LocalizationProvider dateAdapter={AdapterDateFns} locale={deLocale}>
|
|
<AppBar>
|
|
<Toolbar>
|
|
<Typography variant="h5"
|
|
noWrap
|
|
component="div"
|
|
//sx={{ flexGrow: 0, display: { xs: 'flex', md: 'none' } }}
|
|
>
|
|
ToDinos
|
|
</Typography>
|
|
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
|
{pages.map((page) =>
|
|
<Button key={page} onClick={() => setPage(page)} sx={{ my: 2, color: 'white', display: 'block' }}>
|
|
{page}
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<div style={{display: "flex", flexDirection: "column", gap: 2, height: "100%", maxHeight: "100%"}}>
|
|
<Toolbar sx={{flexGrow: 1}}/>
|
|
<div style={{marginLeft: "1em", marginRight: "1em", flexGrow: 1, height: "100%", maxHeight: "100%", minHeight: 0}}>
|
|
{page === "Overview" && <Overview/>}
|
|
{page === "Todos" && <Todos/>}
|
|
{page === "Calendar" && <Calendar/>}
|
|
{page === "Dinos" && <Dinos/>}
|
|
</div>
|
|
</div>
|
|
</LocalizationProvider>
|
|
</ThemeProvider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|