Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Dates #140

Merged
merged 7 commits into from
Mar 17, 2024
+158 −81
Merged

Added Dates #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
de3bcf7
Added Dates
DerCed Mar 1, 2024
a3936bb
Merge branch 'feature/website-2.0' of github.com:HackHPI/hackhpi.gith…
DerCed Mar 7, 2024
df0ef43
Added timetable
DerCed Mar 7, 2024
8a7cd54
Optimized imports
DerCed Mar 7, 2024
c14283e
Added times
DerCed Mar 10, 2024
dcfa389
Merge branch 'feature/website-2.0' of github.com:HackHPI/hackhpi.gith…
DerCed Mar 17, 2024
89f8a4a
Minor fixes
DerCed Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/Features/Features.jsx
View file
Open in desktop
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
Open in desktop
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>
)
}