Skip to content

Commit db87a87

Browse files
rachelyuhrachelyuh
committed
Styled schedule page
1 parent 56d81cc commit db87a87

File tree

4 files changed

+115
-176
lines changed

4 files changed

+115
-176
lines changed

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
strict-ssl=false

‎data/scheduleData.js

+2-150
Original file line numberDiff line numberDiff line change
@@ -2,160 +2,12 @@ let meetData = "We meet every Tuesday from 6:30 P.M. to around 7:30 P.M. Atlanta
22

33
let scheduleData = [
44
{
5-
"date": "Sun 1/13/2021 6:30PM",
6-
"agenda": "Officer Form Due at 11:59 P.M.",
7-
"link": "N/A"
8-
},
9-
{
10-
"date": "Sun 1/20/2021 6:30PM",
11-
"agenda": "Project Teams Informational Meeting",
12-
"link": "https://bluejeans.com/s/K1cE129@jLr/"
13-
},
14-
{
15-
"date": "1/21/2022",
16-
"agenda": "Project Signup Form Due at 11:59 P.M.",
17-
"link": "N/A"
18-
},
19-
{
20-
"date": "1/25/2022",
21-
"agenda": "First Project Meeting, Introduce Project Iteration #1",
22-
"link": "N/A"
23-
},
24-
{
25-
"date": "2/1/2022",
26-
"agenda": "Project Check-up",
27-
"link": "N/A"
28-
},
29-
{
30-
"date": "2/3/2022",
31-
"agenda": "How to Build Personal Website Workshop with Women at CoC",
32-
"link": "https://bluejeans.com/s/GMYpuHlIqOh"
33-
},
34-
{
35-
"date": "2/8/2022",
36-
"agenda": "Project Iteration #1 Due, Introduce Iteration #2",
37-
"link": "N/A",
38-
},
39-
{
40-
"date": "2/15/2022",
41-
"agenda": "Project Check-up",
42-
"link": "N/A",
43-
},
44-
{
45-
"date": "2/17/2022",
46-
"agenda": "Technical Interview Workshop",
47-
"link": "https://bluejeans.com/s/sISTLV9lSFA"
48-
},
49-
{
50-
"date": "2/22/2022",
51-
"agenda": "Project Iteration #2 Due, Introduce Iteration #3",
52-
"link": "N/A"
53-
},
54-
{
55-
"date": "2/24/2022",
56-
"agenda": "Apollo/GraphQL Workshop",
57-
"link": "N/A"
58-
},
59-
{
60-
"date": "3/1/2022",
61-
"agenda": "Project Check Up",
62-
"link": "N/A"
63-
},
64-
{
65-
"date": "3/3/2022",
66-
"agenda": "Agency Collaboration",
67-
"link": "N/A"
68-
},
69-
{
70-
"date": "3/8/2022",
71-
"agenda": "Agency Collaboration",
72-
"link": "N/A"
73-
},
74-
{
75-
"date": "3/15/2022",
76-
"agenda": "Mid-Semester Project Checkup",
77-
"link": "N/A"
78-
},
79-
{
80-
"date": "3/29/2022",
81-
"agenda": "Project Iteration #4 Due, Introduce Iteration #5",
82-
"link": "N/A"
83-
},
84-
{
85-
"date": "4/5/2022",
86-
"agenda": "Project Check-up",
87-
"link": "N/A"
88-
},
89-
{
90-
"date": "4/7/2022",
91-
"agenda": "Mini Hackathon",
92-
"link": "N/A"
93-
},
94-
{
95-
"date": "4/12/2022",
96-
"agenda": "Project Iteration #5 Due, Introduce Iteration #6 + presentation",
97-
"link": "N/A"
98-
},
99-
{
100-
"date": "4/19/2022",
101-
"agenda": "Project Check-up",
102-
"link": "N/A"
103-
},
104-
{
105-
"date": "4/26/2022",
106-
"agenda": "Project Showcase",
107-
"link": "N/A"
108-
},
109-
];
110-
111-
let spring2021ScheduleData = [
112-
{
113-
"date": "1/26/2021",
114-
"agenda": "Project Introductions",
115-
"link": "?"
116-
},
117-
{
118-
"date": "2/2/2021",
119-
"agenda": "Project meetings, HTML/CSS tutorial",
120-
"link": "?"
121-
},
122-
{
123-
"date": "2/9/2021",
124-
"agenda": "Project meetings",
125-
"link": "?"
126-
},
127-
{
128-
"date": "2/16/2021",
129-
"agenda": "Project meeting, JavaScript tutorial",
130-
"link": "?"
131-
},
132-
{
133-
"date": "2/23/2021",
134-
"agenda": "Project meeting, React.js tutorial",
135-
"link": "?"
136-
},
137-
{
138-
"date": "3/2/2021",
139-
"agenda": "Project meeting, Node and Express.js tutorial",
140-
"link": "?"
141-
},
142-
{
143-
"date": "3/9/2021",
144-
"agenda": "Project meeting, MongoDB tutorial",
145-
"link": "?"
146-
},
147-
{
148-
"date": "3/23/2021",
149-
"agenda": "Project meeting, Material-UI tutorial",
150-
"link": "?"
151-
},
152-
{
153-
"date": "3/30/2021",
5+
"date": "3/30/2023",
1546
"agenda": "Project meeting, Git/GitHub tutorial",
1557
"link": "?"
1568
},
1579
{
158-
"date": "4/6/2021",
10+
"date": "4/6/2023",
15911
"agenda": "Project meeting, Python Flask tutorial",
16012
"link": "?"
16113
}

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"react": "^18.2.0",
2020
"react-csv": "^2.2.2",
2121
"react-dom": "^18.2.0",
22-
"react-papaparse": "^4.1.0"
22+
"react-papaparse": "^4.1.0",
23+
"react-vertical-timeline-component": "^3.6.0"
2324
}
2425
}

‎pages/schedule.js

+110-25
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, {Component} from "react";
22
import NavBar from "../components/NavBar";
33
import BottomBar from "../components/BottomBar";
44
import Head from 'next/head'
5+
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
6+
import 'react-vertical-timeline-component/style.min.css';
57
import {scheduleData} from '../data/scheduleData.js';
68
import { Grid, Typography } from "@mui/material";
79

@@ -21,32 +23,115 @@ const Schedule = () => {
2123
<title>Schedule | GT WebDev</title>
2224
</Head>
2325
<NavBar />
26+
<VerticalTimeline>
27+
<VerticalTimelineElement
28+
className="vertical-timeline-element--work"
29+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
30+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
31+
date=""
32+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
33+
// icon={< WorkIcon />}
34+
>
35+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
36+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
37+
<p>
38+
Project meeting, Git/GitHub tutorial
39+
</p>
40+
</VerticalTimelineElement>
41+
42+
<VerticalTimelineElement
43+
className="vertical-timeline-element--work"
44+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
45+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
46+
date=""
47+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
48+
// icon={<WorkIcon />}
49+
>
50+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
51+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
52+
<p>
53+
Project meeting, Git/GitHub tutorial
54+
</p>
55+
</VerticalTimelineElement>
56+
57+
<VerticalTimelineElement
58+
className="vertical-timeline-element--work"
59+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
60+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
61+
date=""
62+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
63+
// icon={<WorkIcon />}
64+
>
65+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
66+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
67+
<p>
68+
Project meeting, Git/GitHub tutorial
69+
</p>
70+
</VerticalTimelineElement>
71+
72+
<VerticalTimelineElement
73+
className="vertical-timeline-element--work"
74+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
75+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
76+
date=""
77+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
78+
// icon={<WorkIcon />}
79+
>
80+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
81+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
82+
<p>
83+
Project meeting, Git/GitHub tutorial
84+
</p>
85+
</VerticalTimelineElement>
86+
87+
<VerticalTimelineElement
88+
className="vertical-timeline-element--work"
89+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
90+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
91+
date=""
92+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
93+
// icon={<WorkIcon />}
94+
>
95+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
96+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
97+
<p>
98+
Project meeting, Git/GitHub tutorial
99+
</p>
100+
</VerticalTimelineElement>
101+
102+
<VerticalTimelineElement
103+
className="vertical-timeline-element--work"
104+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
105+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
106+
date=""
107+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
108+
// icon={<WorkIcon />}
109+
>
110+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
111+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
112+
<p>
113+
Project meeting, Git/GitHub tutorial
114+
</p>
115+
</VerticalTimelineElement>
116+
117+
<VerticalTimelineElement
118+
className="vertical-timeline-element--work"
119+
contentStyle={{ background: '#f0cd42', color: '#222220' }}
120+
contentArrowStyle={{ borderRight: '7px solid #f0cd42' }}
121+
date=""
122+
// iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
123+
// icon={<WorkIcon />}
124+
>
125+
<h3 className="vertical-timeline-element-title"> General Board Meeting </h3>
126+
<h4 className="vertical-timeline-element-subtitle"> February 24, 2023 - Howey L4</h4>
127+
<p>
128+
Project meeting, Git/GitHub tutorial
129+
</p>
130+
</VerticalTimelineElement>
131+
132+
133+
</VerticalTimeline>
24134

25-
<Grid container rowGap={3} className="scheduleContainer">
26-
{scheduleData.map((cur, ind) => {
27-
return(
28-
<Grid container item className="scheduleGrid">
29-
<Grid xs={4} className="scheduleDateGrid">
30-
<Typography className="scheduleDateText">
31-
{oneColText(cur['date'])}
32-
</Typography>
33-
</Grid>
34-
<Grid xs={6} >
35-
<Typography className="scheduleAgendaTxt">
36-
{cur['agenda']}
37-
</Typography>
38-
</Grid>
39-
<Grid xs={2} >
40-
{cur['link'] != 'N/A'
41-
?
42-
<a href={cur['link']}> <img src="camera.png" className="bottomBarImg"/></a>
43-
:
44-
<span />}
45-
</Grid>
46-
</Grid>
47-
)
48-
})}
49-
</Grid>
50135
<BottomBar />
51136
</div>
52137
)

0 commit comments

Comments
 (0)