Skip to content

Commit 67dc532

Browse files
DerCedDerCed
authored
Merge pull request #140 from HackHPI/feature/website-2.0-add-timetable
Added Dates
2 parents 36137dd + 89f8a4a commit 67dc532

File tree

2 files changed

+158
-81
lines changed

2 files changed

+158
-81
lines changed

‎src/components/Features/Features.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Box, Card, Container, Grid, Typography} from "@mui/material";
2-
import {Campaign, Check, ConfirmationNumber, EmojiEvents, MoneyOff} from "@mui/icons-material";
2+
import {Campaign, ConfirmationNumber, EmojiEvents, MoneyOff} from "@mui/icons-material";
33
import React from "react";
44

55
export function IconContainer(props) {
@@ -11,7 +11,6 @@ export function IconContainer(props) {
1111
display: "flex",
1212
justifyContent: "center",
1313
alignItems: "center",
14-
marginBottom: "1rem"
1514
}}>
1615
{React.cloneElement(props.icon, {sx: {color: "white"}, style: {width: "65%", height: "auto"}})}
1716
</Card>

‎src/components/TimeTable/TimeTable.jsx

Lines changed: 157 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,112 @@
1-
import {Avatar, Box, Card, Container, Divider, Grid, Stack, Typography} from "@mui/material";
1+
import {Box, Card, Container, Divider, Grid, Stack, Typography} from "@mui/material";
2+
import {
3+
Campaign,
4+
Celebration,
5+
ConfirmationNumber,
6+
EmojiEvents,
7+
EmojiObjects,
8+
PlayArrow,
9+
Restaurant,
10+
Stop
11+
} from "@mui/icons-material";
12+
import {IconContainer} from "../Features/Features";
213

3-
export function TimeTable() {
14+
const dayOne = [
15+
{
16+
time: "08:00 - 09:00",
17+
icon: <ConfirmationNumber/>,
18+
title: "Check-In",
19+
person: "",
20+
},
21+
{
22+
time: "09:00 - 10:00",
23+
icon: <Restaurant/>,
24+
title: "Breakfast & Get to know each other",
25+
person: "",
26+
},
27+
{
28+
time: "10:00 - 11:00",
29+
icon: <Campaign/>,
30+
title: "Introduction & Speakers",
31+
person: "",
32+
},
33+
{
34+
time: "11:00 - 12:00",
35+
icon: <EmojiObjects/>,
36+
title: "Challenge Input Sessions",
37+
person: "",
38+
},
39+
{
40+
time: "12:00 - 13:00",
41+
icon: <Restaurant/>,
42+
title: "Lunch",
43+
person: "",
44+
},
45+
{
46+
time: "13:00 - 18:00",
47+
icon: <EmojiObjects/>,
48+
title: "Idea-Workshop",
49+
person: "optional",
50+
},
51+
{
52+
time: "13:00 - 13:00 next day (Continuously)",
53+
icon: <PlayArrow/>,
54+
title: "Start Hacking Time",
55+
person: "",
56+
},
57+
{
58+
time: "18:00 - 19:00",
59+
icon: <Restaurant/>,
60+
title: "Dinner",
61+
person: "",
62+
}
63+
]
64+
65+
const dayTwo = [
66+
{
67+
time: "08:00 - 09:00",
68+
icon: <Restaurant/>,
69+
title: "Breakfast",
70+
person: "",
71+
},
72+
{
73+
time: "09:00 - 10:00",
74+
icon: <EmojiObjects/>,
75+
title: "Pitch-Workshop",
76+
person: "optional",
77+
},
78+
{
79+
time: "13:00",
80+
icon: <Stop/>,
81+
title: "End Hacking Time",
82+
person: "",
83+
},
84+
{
85+
time: "13:00 - 14:00",
86+
icon: <Restaurant/>,
87+
title: "Lunch",
88+
person: "",
89+
},
90+
{
91+
time: "14:00 - 16:00",
92+
icon: <Campaign/>,
93+
title: "Challenge Presentations",
94+
person: "",
95+
}, {
96+
time: "17:00 - 18:00",
97+
icon: <EmojiEvents/>,
98+
title: "Feedback & Awards",
99+
person: "",
100+
}, {
101+
time: "18:00",
102+
icon: <Celebration/>,
103+
title: "Drinks & Networking",
104+
person: "",
105+
}
106+
]
4107

5-
const timetable = (
108+
export function Table(props) {
109+
return (
6110
<Card>
7111
<Box sx={{
8112
height: "5rem",
@@ -12,90 +116,64 @@ export function TimeTable() {
12116
pl: 3
13117
}}>
14118
<Stack alignItems={"center"} spacing={2} direction={"row"}>
15-
<Typography sx={{fontSize: "1.5rem", fontWeight: 600}}>Day 1</Typography>
16-
<Typography sx={{fontSize: "1.25rem", fontWeight: 300}}>06.04.2024</Typography>
119+
<Typography sx={{fontSize: "1.5rem", fontWeight: 600}}>{props.title}</Typography>
120+
<Typography sx={{fontSize: "1.25rem", fontWeight: 300}}>{props.subtitle}</Typography>
17121
</Stack>
18122
</Box>
19-
<Box sx={{pt: 3, pb: 3}}>
20-
<Container>
21-
<Grid container alignItems={"center"} spacing={3}>
22-
<Grid item xs={2} sx={{display: "flex", justifyContent: "center"}}>
23-
<Avatar sx={{
24-
width: "70%",
25-
height: "auto",
26-
aspectRatio: "1/1",
27-
backgroundColor: "background.default"
28-
}}>SO</Avatar>
29-
</Grid>
30-
<Grid item xs={8}>
31-
<Typography color={"text.disabled"}>
32-
08:00-09:00
33-
</Typography>
34-
<Typography sx={{fontWeight: 600}}>
35-
Hey There!
36-
</Typography>
37-
<Typography color={"text.disabled"}>
38-
a Person
39-
</Typography>
40-
</Grid>
41-
</Grid>
42-
</Container>
43-
</Box>
44-
<Divider/>
45-
<Box sx={{pt: 3, pb: 3}}>
46-
<Container>
47-
<Grid container alignItems={"center"} spacing={3}>
48-
<Grid item xs={2} sx={{display: "flex", justifyContent: "center"}}>
49-
<Avatar sx={{
50-
width: "70%",
51-
height: "auto",
52-
aspectRatio: "1/1",
53-
backgroundColor: "background.default"
54-
}}>SO</Avatar>
55-
</Grid>
56-
<Grid item xs={8}>
57-
<Typography color={"text.disabled"}>
58-
08:00-09:00
59-
</Typography>
60-
<Typography sx={{fontWeight: 600}}>
61-
Nothing to see here yet
62-
</Typography>
63-
<Typography color={"text.disabled"}>
64-
But soon, something will be here
65-
</Typography>
66-
</Grid>
67-
</Grid>
68-
</Container>
69-
</Box>
123+
124+
{
125+
props.data.map((item, index) => (
126+
<>
127+
<Box sx={{pt: 3, pb: 3}}>
128+
<Container>
129+
<Grid container spacing={3}>
130+
<Grid item xs={2} sx={{
131+
display: "flex",
132+
justifyContent: "center",
133+
alignContent: "center",
134+
alignItems: "center"
135+
}}>
136+
<IconContainer icon={item.icon}/>
137+
</Grid>
138+
<Grid item xs={8} sx={{display: "flex", alignItems: "center"}}>
139+
<Box>
140+
<Typography color={"text.disabled"} noWrap>
141+
{item.time}
142+
</Typography>
143+
<Typography sx={{fontWeight: 600}} noWrap>
144+
{item.title}
145+
</Typography>
146+
<Typography color={"text.disabled"} noWrap>
147+
{item.person}
148+
</Typography>
149+
</Box>
150+
</Grid>
151+
<Grid item xs={2}/>
152+
</Grid>
153+
</Container>
154+
</Box>
155+
{index !== props.data.length - 1 ? <Divider/> : undefined}
156+
</>
157+
))
158+
}
70159
</Card>
71160
)
161+
}
162+
163+
export function TimeTable() {
72164

73165
return (
74166
<Container sx={{paddingBottom: 10, paddingTop: 10}}>
75167
<Typography variant={"h2"} component={"h1"} gutterBottom>Time Table</Typography>
76-
<Box sx={{position: "relative"}}>
77-
<Box sx={{
78-
position: "absolute",
79-
transform: "translate(-50%,-50%)",
80-
left: "50%",
81-
top: "50%",
82-
zIndex: 1000,
83-
}}>
84-
<Typography variant={"h5"} fontWeight={"bold"}>
85-
Will be announced soon
86-
</Typography>
87-
</Box>
88-
<Box sx={{filter: "blur(10px)"}}>
89-
<Grid container spacing={5}>
90-
<Grid item md={6} xs={12}>
91-
{timetable}
92-
</Grid>
93-
<Grid item md={6} xs={12}>
94-
{timetable}
95-
</Grid>
96-
</Grid>
97-
</Box>
98-
</Box>
168+
169+
<Grid container spacing={5}>
170+
<Grid item md={6} xs={12}>
171+
<Table data={dayOne} title={"Day 1"} subtitle={"Friday 05.04"}/>
172+
</Grid>
173+
<Grid item md={6} xs={12}>
174+
<Table data={dayTwo} title={"Day 2"} subtitle={"Saturday 06.04"}/>
175+
</Grid>
176+
</Grid>
99177
</Container>
100178
)
101179
}

0 commit comments

Comments
 (0)