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

Commit 5826234

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Add course cards for student Dashboard" (#154)
1 parent 46f2067 commit 5826234

File tree

7 files changed

+344
-17
lines changed

7 files changed

+344
-17
lines changed

‎public/static/images/courses/courseComplete.png‎

578 Bytes
Loading

‎public/static/images/courses/error.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎public/static/sample.png‎

22.4 KB
Loading

‎src/components/Course/EnrolledCourse.js‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
4+
import {
5+
Typography,
6+
Box,
7+
Card,
8+
CardContent,
9+
Grid,
10+
LinearProgress
11+
} from '@material-ui/core';
12+
import { Link } from 'react-router-dom';
13+
import { withStyles } from '@material-ui/styles';
14+
15+
const useStyles = makeStyles(theme => ({
16+
card: {
17+
height: '100%',
18+
display: 'flex',
19+
flexDirection: 'column',
20+
borderRadius: '10px',
21+
margin: '12px',
22+
boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.13)'
23+
},
24+
cardContent: {
25+
margin: '15px 5px'
26+
},
27+
complete: {
28+
fontWeight: '600'
29+
}
30+
}));
31+
32+
export default function EnrolledCourse({ course }) {
33+
const classes = useStyles();
34+
return (
35+
<Box>
36+
<Card
37+
className={classes.card}
38+
display="flex"
39+
style={{
40+
maxWidth: '320px'
41+
}}
42+
>
43+
<CardContent className={classes.cardContent}>
44+
<Box display="flex" flexDirection="column">
45+
<Typography
46+
align="left"
47+
variant="h5"
48+
style={{
49+
color: '#0085FF',
50+
paddingBottom: '11px'
51+
}}
52+
>
53+
{course.difficulty}
54+
</Typography>
55+
<Typography
56+
align="left"
57+
variant="h6"
58+
style={{
59+
color: '#B20000',
60+
marginBottom: '12px'
61+
}}
62+
>
63+
{course.domain}
64+
</Typography>
65+
66+
<Typography variant="h4" align="left">
67+
{course.title}
68+
</Typography>
69+
</Box>
70+
</CardContent>
71+
72+
<Box>
73+
<Grid container md={12} justify="space-around" alignItems="center">
74+
<Grid item md={4}>
75+
<Typography
76+
fontWeight=""
77+
noWrap
78+
variant="caption"
79+
style={{ fontWeight: 'bold' }}
80+
>
81+
Application Date
82+
</Typography>
83+
</Grid>
84+
<Grid item md={2}>
85+
<Typography noWrap variant="caption">
86+
12:00 PM
87+
</Typography>
88+
</Grid>
89+
<Grid item md={4}>
90+
<Typography noWrap variant="caption">
91+
19th sept 2020
92+
</Typography>
93+
</Grid>
94+
</Grid>
95+
96+
<Grid
97+
container
98+
md={12}
99+
justify="space-around"
100+
alignItems="center"
101+
style={{ padding: '10px' }}
102+
>
103+
<Grid container md={3} sm={3} xs={3} row>
104+
<ActiveLinearProgress
105+
variant="determinate"
106+
value="99"
107+
></ActiveLinearProgress>
108+
<Typography className={classes.complete} variant="caption">
109+
{'Application Filled'}
110+
</Typography>
111+
</Grid>
112+
<Grid container md={3} sm={3} xs={3} row>
113+
<ActiveLinearProgress
114+
variant="determinate"
115+
value="99"
116+
></ActiveLinearProgress>
117+
<Typography className={classes.complete} variant="caption">
118+
{'Got Shortlisted'}
119+
</Typography>
120+
</Grid>
121+
<Grid container md={3} sm={3} xs={3} row>
122+
<ActiveLinearProgress
123+
variant="determinate"
124+
value="99"
125+
></ActiveLinearProgress>
126+
<Typography className={classes.complete} variant="caption">
127+
{'Online Meeting'}
128+
</Typography>
129+
</Grid>
130+
<Grid container md={3} sm={3} xs={3} row>
131+
<ActiveLinearProgress
132+
variant="determinate"
133+
value="99"
134+
></ActiveLinearProgress>
135+
<Typography className={classes.complete} variant="caption">
136+
{'Enroll In course'}
137+
</Typography>
138+
</Grid>
139+
</Grid>
140+
</Box>
141+
<CardContent style={{ textAlign: 'center' }}>
142+
<img
143+
src="/static/images/courses/courseComplete.png"
144+
alt="success flag"
145+
/>
146+
</CardContent>
147+
148+
<CardContent className={classes.cardContent}>
149+
<Typography
150+
variant="caption"
151+
align="center"
152+
display="block"
153+
style={{ fontWeight: 600, fontSize: '12px' }}
154+
>
155+
Congrats!! You Can Enroll Now
156+
</Typography>
157+
<Typography
158+
variant="caption"
159+
align="center"
160+
display="block"
161+
style={{ fontWeight: 500, fontSize: '10px', color: '#4CAC00' }}
162+
>
163+
You have successfully completed the application process. You can now
164+
enroll into the course through the enroll now button given below.
165+
</Typography>
166+
</CardContent>
167+
168+
<Link
169+
display="flex"
170+
justifyContent="center"
171+
to={course.link}
172+
style={{
173+
background: '#A60000',
174+
color: '#FF4C00',
175+
textDecoration: 'none',
176+
marginBottom: '16px'
177+
}}
178+
>
179+
<Typography
180+
align="center"
181+
style={{
182+
color: '#FFFFFF'
183+
}}
184+
>
185+
<Box m={1} fontWeight={600}>
186+
Enroll Now
187+
</Box>
188+
</Typography>
189+
</Link>
190+
<Typography
191+
style={{
192+
fontSize: '0.56rem',
193+
padding: '0px 12px 10px',
194+
color: '#787878'
195+
}}
196+
variant="caption"
197+
>
198+
You will be able to enroll into the course as soon as you successfully
199+
completed your online meeting.
200+
</Typography>
201+
</Card>
202+
</Box>
203+
);
204+
}
205+
206+
const ActiveLinearProgress = withStyles(theme => ({
207+
root: {
208+
width: '100%',
209+
marginTop: '10px',
210+
marginBottom: '10px'
211+
},
212+
colorPrimary: {
213+
backgroundColor: '#FFF'
214+
},
215+
bar: {
216+
borderRadius: 5,
217+
backgroundColor: '#4CAC00'
218+
}
219+
}))(LinearProgress);

‎src/components/Course/NotEnrolled.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Box, Card, CardContent, Typography } from '@material-ui/core';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import clsx from 'clsx';
4+
import React from 'react';
5+
import { Link } from 'react-router-dom';
6+
7+
const useStyles = makeStyles(theme => ({
8+
card: {
9+
background: '#FBFCFF',
10+
height: '100%',
11+
display: 'flex',
12+
flexDirection: 'column',
13+
borderRadius: '10px',
14+
margin: '12px',
15+
boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.13)'
16+
},
17+
cardContent: {
18+
margin: '15px 5px'
19+
},
20+
mainIcon: {
21+
textAlign: 'center',
22+
padding: '80px 0px 20px'
23+
}
24+
}));
25+
26+
export default function NotEnrolled() {
27+
const classes = useStyles();
28+
return (
29+
<Box>
30+
<Card
31+
className={classes.card}
32+
display="flex"
33+
style={{
34+
maxWidth: '320px'
35+
}}
36+
>
37+
<CardContent className={clsx(classes.cardContent, classes.mainIcon)}>
38+
<img src="/static/images/courses/error.svg" alt="error" />
39+
</CardContent>
40+
<CardContent style={{ textAlign: 'center', padding: '0px 40px 36px' }}>
41+
<Typography
42+
align="center"
43+
variant="h5"
44+
style={{ fontSize: '18px', color: '#000', paddingBottom: '12px' }}
45+
>
46+
You Have Not Enrolled In Any Course Yet!!
47+
</Typography>
48+
<Typography align="center" variant="body2">
49+
Your Courses in which you have enrolled will appear here.
50+
</Typography>
51+
</CardContent>
52+
53+
<Link
54+
display="flex"
55+
justifyContent="center"
56+
to="/courses"
57+
style={{
58+
background: '#A60000',
59+
color: '#FF4C00',
60+
textDecoration: 'none',
61+
marginBottom: '16px'
62+
}}
63+
>
64+
<Typography
65+
align="center"
66+
style={{
67+
color: '#FFFFFF'
68+
}}
69+
>
70+
<Box m={1} fontWeight={600}>
71+
Explore Courses
72+
</Box>
73+
</Typography>
74+
</Link>
75+
<Typography
76+
style={{
77+
fontSize: '0.56rem',
78+
padding: '0px 12px 10px',
79+
color: '#787878'
80+
}}
81+
variant="caption"
82+
>
83+
Enroll into the course now and get flat 10% off on any course from
84+
code for cause.
85+
</Typography>
86+
</Card>
87+
</Box>
88+
);
89+
}

‎src/components/Hero/StudentDashboardHero.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ function StudentNameWithAvatar({ wrap }) {
167167
<Avatar
168168
item
169169
alt="the firebase user ***"
170-
src="/static/images/avatars/kunal_kush.jpg"
170+
src="/static/sample.png"
171171
className={classes.avatar}
172172
xs={12}
173173
/>

0 commit comments

Comments
 (0)