Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit ff8fafb

Browse files
maverick-27maverick-27
authored
Adds BootCamp on Header Section (#127)
* BootCamp Added * File Structure Change
1 parent 517cc5f commit ff8fafb

7 files changed

Lines changed: 567 additions & 8 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎src/Routes.js‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import CAView from 'src/views/pages/CLView';
77
import EventsView from 'src/views/pages/EventsView';
88
import LoadingScreen from 'src/components/LoadingScreen';
99
import CoursesView from 'src/views/pages/CoursesView';
10+
import Bootcamps from 'src/views/pages/BootCampsView/Bootcamps';
1011
import ProfileView from 'src/views/pages/ProfileView';
1112
import ApplicationsView from 'src/views/pages/ApplicationsView';
1213
import Error404View from 'src/views/pages/Error404View';
@@ -86,6 +87,16 @@ const renderRoutes = () => (
8687
</>
8788
)}
8889
/>
90+
91+
<Route
92+
path="/bootcamp"
93+
render={props => (
94+
<MainLayout>
95+
<Bootcamps {...props} />
96+
</MainLayout>
97+
)}
98+
/>
99+
89100
<Route
90101
path="/campusLeaders"
91102
exact
@@ -102,7 +113,10 @@ const renderRoutes = () => (
102113
exact
103114
render={props => (
104115
<MainLayout>
105-
<CoursePage course={coursesContent.advanced.machineLearning} {...props} />
116+
<CoursePage
117+
course={coursesContent.advanced.machineLearning}
118+
{...props}
119+
/>
106120
</MainLayout>
107121
)}
108122
/>
@@ -111,7 +125,10 @@ const renderRoutes = () => (
111125
exact
112126
render={props => (
113127
<MainLayout>
114-
<CoursePage course={coursesContent.foundation.algoJava} {...props} />
128+
<CoursePage
129+
course={coursesContent.foundation.algoJava}
130+
{...props}
131+
/>
115132
</MainLayout>
116133
)}
117134
/>
@@ -120,7 +137,10 @@ const renderRoutes = () => (
120137
exact
121138
render={props => (
122139
<MainLayout>
123-
<CoursePage course={coursesContent.foundation.algoPython} {...props} />
140+
<CoursePage
141+
course={coursesContent.foundation.algoPython}
142+
{...props}
143+
/>
124144
</MainLayout>
125145
)}
126146
/>
@@ -129,7 +149,10 @@ const renderRoutes = () => (
129149
exact
130150
render={props => (
131151
<MainLayout>
132-
<CoursePage course={coursesContent.advanced.webDevelopment} {...props} />
152+
<CoursePage
153+
course={coursesContent.advanced.webDevelopment}
154+
{...props}
155+
/>
133156
</MainLayout>
134157
)}
135158
/>
@@ -138,7 +161,10 @@ const renderRoutes = () => (
138161
exact
139162
render={props => (
140163
<MainLayout>
141-
<CoursePage course={coursesContent.advanced.competitiveJava} {...props} />
164+
<CoursePage
165+
course={coursesContent.advanced.competitiveJava}
166+
{...props}
167+
/>
142168
</MainLayout>
143169
)}
144170
/>
@@ -147,7 +173,10 @@ const renderRoutes = () => (
147173
exact
148174
render={props => (
149175
<MainLayout>
150-
<CoursePage course={coursesContent.foundation.devPython} {...props} />
176+
<CoursePage
177+
course={coursesContent.foundation.devPython}
178+
{...props}
179+
/>
151180
</MainLayout>
152181
)}
153182
/>

‎src/layouts/MainLayout/TopBar/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
7070
const navItems = [
7171
{ title: 'Campus Leaders', link: '/campusLeaders' },
7272
{ title: 'Events', link: '/events' },
73-
{ title: 'Courses', link: '/courses' }
74-
// { title: 'Team', link: '/team' }
73+
{ title: 'Courses', link: '/courses' },
74+
{ title: 'BootCamps', link: '/bootcamp' }
7575
];
7676

7777
const list = () => (

‎src/views/pages/BootCampsView/Bootcamps.js‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import PropTypes from 'prop-types';
4+
5+
import { Grid, Typography } from '@material-ui/core';
6+
7+
import coursesContent from 'src/data/courses';
8+
import CourseCard from '../../../components/Course/CourseCardTemplate1';
9+
10+
const useStyles = makeStyles(theme => ({
11+
icon: {
12+
marginRight: theme.spacing(2)
13+
},
14+
root: {
15+
padding: theme.spacing(10, 10, 10),
16+
display: 'flex',
17+
justifyContent: 'center',
18+
alignItems: 'center',
19+
[theme.breakpoints.down('md')]: {
20+
padding: theme.spacing(10, 3, 10)
21+
}
22+
},
23+
cardGrid: {
24+
paddingTop: theme.spacing(8),
25+
paddingBottom: theme.spacing(8)
26+
},
27+
card: {
28+
height: '100%',
29+
display: 'flex',
30+
flexDirection: 'column',
31+
borderRadius: '10px',
32+
margin: '12px',
33+
boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.13)'
34+
},
35+
cardMedia: {
36+
width: '100%',
37+
height: 'auto'
38+
// paddingTop: "56.25%", // 16:9
39+
},
40+
cardContent: {},
41+
chipActions: {
42+
display: 'block'
43+
},
44+
chip: {
45+
margin: '8px 0 3px 8px'
46+
},
47+
extraMargin: {
48+
marginTop: '15px',
49+
marginBottom: '0'
50+
},
51+
btn: {
52+
textTransform: 'none'
53+
},
54+
paddingCls: {
55+
paddingLeft: '10px',
56+
paddingRight: '10px'
57+
},
58+
paddingClsxs: {
59+
padding: 0
60+
},
61+
iconSize: {
62+
fontSize: '32px'
63+
},
64+
text: {
65+
color: '#FFFFFF'
66+
},
67+
avatarLarge: {
68+
width: theme.spacing(16),
69+
height: theme.spacing(16),
70+
margin: theme.spacing(4, 0, 2)
71+
},
72+
73+
avatarGrid: {
74+
display: 'flex',
75+
flexDirection: 'column',
76+
alignItems: 'center',
77+
justifyContent: 'center',
78+
padding: '5px'
79+
},
80+
81+
slide: {
82+
perspective: 0, // create perspective
83+
overflow: 'hidden',
84+
// relative is a must if you want to create overlapping layers in children
85+
position: 'relative'
86+
},
87+
background: {
88+
width: '100%',
89+
height: 'auto',
90+
backgroundPosition: 'bottom center',
91+
backgroundSize: 'cover'
92+
},
93+
gridList: {
94+
flexWrap: 'wrap',
95+
width: '100%',
96+
// Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
97+
transform: 'translateZ(0)'
98+
}
99+
}));
100+
101+
export default function Bootcamps() {
102+
const classes = useStyles();
103+
104+
const foundation = coursesContent.foundation;
105+
const advanced = coursesContent.advanced;
106+
107+
return (
108+
<Grid container className={classes.root}>
109+
<Grid item lg={12} md={12} sm={12} xs={12}>
110+
<Typography
111+
variant="h1"
112+
align="center"
113+
color="textPrimary"
114+
style={{
115+
marginBottom: '20px'
116+
}}
117+
>
118+
Foundational Courses
119+
</Typography>
120+
</Grid>
121+
122+
<Grid container>
123+
<Grid
124+
item
125+
lg={12}
126+
md={12}
127+
sm={12}
128+
xs={12}
129+
align="center"
130+
display="flex"
131+
justifyContent="center"
132+
alignItems="center"
133+
>
134+
<CoursesGrid courses={foundation} />
135+
</Grid>
136+
</Grid>
137+
138+
<Grid
139+
item
140+
lg={12}
141+
md={12}
142+
sm={12}
143+
xs={12}
144+
style={{
145+
marginTop: '48px'
146+
}}
147+
>
148+
<Typography
149+
variant="h1"
150+
align="center"
151+
color="textPrimary"
152+
style={{
153+
marginBottom: '20px'
154+
}}
155+
>
156+
Advanced Courses
157+
</Typography>
158+
</Grid>
159+
160+
<Grid container>
161+
<Grid
162+
item
163+
lg={12}
164+
md={12}
165+
sm={12}
166+
xs={12}
167+
align="center"
168+
display="flex"
169+
justifyContent="center"
170+
alignItems="center"
171+
>
172+
<CoursesGrid courses={advanced} />
173+
</Grid>
174+
</Grid>
175+
</Grid>
176+
);
177+
}
178+
179+
const CoursesGrid = ({ courses }) => {
180+
const classes = useStyles();
181+
return (
182+
<Grid
183+
container
184+
className={classes.gridList}
185+
style={{
186+
justifyContent: 'center',
187+
alignItems: 'center'
188+
}}
189+
>
190+
{Object.entries(courses).map(([cname, course], index) => {
191+
return (
192+
<Grid
193+
item
194+
key={course.id}
195+
lg={4}
196+
md={4}
197+
sm={6}
198+
xs={12}
199+
style={{
200+
maxWidth: '320px'
201+
}}
202+
>
203+
<CourseCard course={course} />
204+
</Grid>
205+
);
206+
})}
207+
</Grid>
208+
);
209+
};
210+
211+
function TabPanel(props) {
212+
const { children, value, index } = props;
213+
214+
return (
215+
<div role="tabpanel" hidden={value !== index}>
216+
<Grid container>{children}</Grid>
217+
</div>
218+
);
219+
}
220+
221+
TabPanel.propTypes = {
222+
children: PropTypes.node,
223+
index: PropTypes.any.isRequired,
224+
value: PropTypes.any.isRequired
225+
};

0 commit comments

Comments
 (0)