felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Appbar, implemented MUI

This commit is contained in:
Kristoffer Juelsenn 2022-03-22 15:48:57 +01:00
parent 78174a9f05
commit 4a2579db50
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/client/src/frontpage.js
View File

@ -15,10 +15,12 @@ import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar"; import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar"; import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
function CreateButton(props) { function CreateButton(props) {
return ( return (
<Link to="/create"> <Link to="/create" style={{textDecoration:'none'}}>
<Button variant="contained" color="primary"> <Button variant="contained" color="primary">
Create Tournament Create Tournament
</Button> </Button>
@ -28,7 +30,7 @@ function CreateButton(props) {
function OverviewButton(props) { function OverviewButton(props) {
return ( return (
<Link to="/tournament"> <Link to="/tournament" style={{textDecoration:'none'}}>
<Button variant="contained" color="success"> <Button variant="contained" color="success">
View Tournament View Tournament
</Button> </Button>
@ -39,9 +41,19 @@ function OverviewButton(props) {
function ListElement(props) { function ListElement(props) {
return ( return (
<Container> <Container>
<Grid container spacing={2}>
<Grid item xs={5}>
<Typography noWrap>
{props.name}, {props.competitors} competitors, Date: {props.date} {props.name}, {props.competitors} competitors, Date: {props.date}
</Typography>
</Grid>
<Grid item>
<ManageButton /> <ManageButton />
</Grid>
<Grid item>
<OverviewButton /> <OverviewButton />
</Grid>
</Grid>
</Container> </Container>
); );
} }
@ -50,28 +62,25 @@ function Home() {
return ( return (
<React.StrictMode> <React.StrictMode>
<CssBaseline /> <CssBaseline />
<AppBar <AppBar position="relative" color="primary">
position="relative"
sx={{
backgroundColor: "grey",
}}
>
<Toolbar> <Toolbar>
<HomeImage /> <HomeImage className='mainIcon'/>
<Typography>This is an Appbar</Typography> <Typography>This is an Appbar</Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<main>
<CreateButton />
<Container> <Container>
<Box>
<CreateButton />
</Box>
<ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" /> <ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
<ListElement <ListElement name="Saturday Showdown" competitors="8" date="30.04.2022"/>
name="Saturday Showdown"
competitors="8"
date="30.04.2022"
/>
<ListElement name="Sunday Funday" competitors="64" date="01.05.2022" /> <ListElement name="Sunday Funday" competitors="64" date="01.05.2022" />
</Container> </Container>
</main>
<footer className="footer">
</footer>
</React.StrictMode> </React.StrictMode>
); );
} }