Skip to content

Commit

Permalink
Merge pull request #140 from HackHPI/feature/website-2.0-add-timetable
Browse files Browse the repository at this point in the history 
Added Dates
  • Loading branch information
@DerCed
DerCed authored Mar 17, 2024
2 parents 36137dd + 89f8a4a commit 67dc532
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 81 deletions.
3 changes: 1 addition & 2 deletions src/components/Features/Features.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Box, Card, Container, Grid, Typography} from "@mui/material";
import {Campaign, Check, ConfirmationNumber, EmojiEvents, MoneyOff} from "@mui/icons-material";
import {Campaign, ConfirmationNumber, EmojiEvents, MoneyOff} from "@mui/icons-material";
import React from "react";

export function IconContainer(props) {
Expand All @@ -11,7 +11,6 @@ export function IconContainer(props) {
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: "1rem"
}}>
{React.cloneElement(props.icon, {sx: {color: "white"}, style: {width: "65%", height: "auto"}})}
</Card>
Expand Down
236 changes: 157 additions & 79 deletions src/components/TimeTable/TimeTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,112 @@
import {Avatar, Box, Card, Container, Divider, Grid, Stack, Typography} from "@mui/material";
import {Box, Card, Container, Divider, Grid, Stack, Typography} from "@mui/material";
import {
Campaign,
Celebration,
ConfirmationNumber,
EmojiEvents,
EmojiObjects,
PlayArrow,
Restaurant,
Stop
} from "@mui/icons-material";
import {IconContainer} from "../Features/Features";

export function TimeTable() {
const dayOne = [
{
time: "08:00 - 09:00",
icon: <ConfirmationNumber/>,
title: "Check-In",
person: "",
},
{
time: "09:00 - 10:00",
icon: <Restaurant/>,
title: "Breakfast & Get to know each other",
person: "",
},
{
time: "10:00 - 11:00",
icon: <Campaign/>,
title: "Introduction & Speakers",
person: "",
},
{
time: "11:00 - 12:00",
icon: <EmojiObjects/>,
title: "Challenge Input Sessions",
person: "",
},
{
time: "12:00 - 13:00",
icon: <Restaurant/>,
title: "Lunch",
person: "",
},
{
time: "13:00 - 18:00",
icon: <EmojiObjects/>,
title: "Idea-Workshop",
person: "optional",
},
{
time: "13:00 - 13:00 next day (Continuously)",
icon: <PlayArrow/>,
title: "Start Hacking Time",
person: "",
},
{
time: "18:00 - 19:00",
icon: <Restaurant/>,
title: "Dinner",
person: "",
}
]

const dayTwo = [
{
time: "08:00 - 09:00",
icon: <Restaurant/>,
title: "Breakfast",
person: "",
},
{
time: "09:00 - 10:00",
icon: <EmojiObjects/>,
title: "Pitch-Workshop",
person: "optional",
},
{
time: "13:00",
icon: <Stop/>,
title: "End Hacking Time",
person: "",
},
{
time: "13:00 - 14:00",
icon: <Restaurant/>,
title: "Lunch",
person: "",
},
{
time: "14:00 - 16:00",
icon: <Campaign/>,
title: "Challenge Presentations",
person: "",
}, {
time: "17:00 - 18:00",
icon: <EmojiEvents/>,
title: "Feedback & Awards",
person: "",
}, {
time: "18:00",
icon: <Celebration/>,
title: "Drinks & Networking",
person: "",
}
]

const timetable = (
export function Table(props) {
return (
<Card>
<Box sx={{
height: "5rem",
Expand All @@ -12,90 +116,64 @@ export function TimeTable() {
pl: 3
}}>
<Stack alignItems={"center"} spacing={2} direction={"row"}>
<Typography sx={{fontSize: "1.5rem", fontWeight: 600}}>Day 1</Typography>
<Typography sx={{fontSize: "1.25rem", fontWeight: 300}}>06.04.2024</Typography>
<Typography sx={{fontSize: "1.5rem", fontWeight: 600}}>{props.title}</Typography>
<Typography sx={{fontSize: "1.25rem", fontWeight: 300}}>{props.subtitle}</Typography>
</Stack>
</Box>
<Box sx={{pt: 3, pb: 3}}>
<Container>
<Grid container alignItems={"center"} spacing={3}>
<Grid item xs={2} sx={{display: "flex", justifyContent: "center"}}>
<Avatar sx={{
width: "70%",
height: "auto",
aspectRatio: "1/1",
backgroundColor: "background.default"
}}>SO</Avatar>
</Grid>
<Grid item xs={8}>
<Typography color={"text.disabled"}>
08:00-09:00
</Typography>
<Typography sx={{fontWeight: 600}}>
Hey There!
</Typography>
<Typography color={"text.disabled"}>
a Person
</Typography>
</Grid>
</Grid>
</Container>
</Box>
<Divider/>
<Box sx={{pt: 3, pb: 3}}>
<Container>
<Grid container alignItems={"center"} spacing={3}>
<Grid item xs={2} sx={{display: "flex", justifyContent: "center"}}>
<Avatar sx={{
width: "70%",
height: "auto",
aspectRatio: "1/1",
backgroundColor: "background.default"
}}>SO</Avatar>
</Grid>
<Grid item xs={8}>
<Typography color={"text.disabled"}>
08:00-09:00
</Typography>
<Typography sx={{fontWeight: 600}}>
Nothing to see here yet
</Typography>
<Typography color={"text.disabled"}>
But soon, something will be here
</Typography>
</Grid>
</Grid>
</Container>
</Box>

{
props.data.map((item, index) => (
<>
<Box sx={{pt: 3, pb: 3}}>
<Container>
<Grid container spacing={3}>
<Grid item xs={2} sx={{
display: "flex",
justifyContent: "center",
alignContent: "center",
alignItems: "center"
}}>
<IconContainer icon={item.icon}/>
</Grid>
<Grid item xs={8} sx={{display: "flex", alignItems: "center"}}>
<Box>
<Typography color={"text.disabled"} noWrap>
{item.time}
</Typography>
<Typography sx={{fontWeight: 600}} noWrap>
{item.title}
</Typography>
<Typography color={"text.disabled"} noWrap>
{item.person}
</Typography>
</Box>
</Grid>
<Grid item xs={2}/>
</Grid>
</Container>
</Box>
{index !== props.data.length - 1 ? <Divider/> : undefined}
</>
))
}
</Card>
)
}

export function TimeTable() {

return (
<Container sx={{paddingBottom: 10, paddingTop: 10}}>
<Typography variant={"h2"} component={"h1"} gutterBottom>Time Table</Typography>
<Box sx={{position: "relative"}}>
<Box sx={{
position: "absolute",
transform: "translate(-50%,-50%)",
left: "50%",
top: "50%",
zIndex: 1000,
}}>
<Typography variant={"h5"} fontWeight={"bold"}>
Will be announced soon
</Typography>
</Box>
<Box sx={{filter: "blur(10px)"}}>
<Grid container spacing={5}>
<Grid item md={6} xs={12}>
{timetable}
</Grid>
<Grid item md={6} xs={12}>
{timetable}
</Grid>
</Grid>
</Box>
</Box>

<Grid container spacing={5}>
<Grid item md={6} xs={12}>
<Table data={dayOne} title={"Day 1"} subtitle={"Friday 05.04"}/>
</Grid>
<Grid item md={6} xs={12}>
<Table data={dayTwo} title={"Day 2"} subtitle={"Saturday 06.04"}/>
</Grid>
</Grid>
</Container>
)
}

0 comments on commit 67dc532

Please sign in to comment.