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

Commit eeb660a

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Add Blog Reader View (#136)
* Add Blog View to the website * Add Seperate Blog Reading Page
1 parent 7ff4008 commit eeb660a

File tree

20 files changed

+1211
-9
lines changed

20 files changed

+1211
-9
lines changed

‎public/static/images/backs/blogs.png

499 KB
Loading

‎public/static/images/projects/p2.png

101 KB
Loading

‎src/Routes.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import CoursesView from 'src/views/pages/CoursesView';
1010
import Bootcamps from 'src/views/pages/BootCampsView/Bootcamps';
1111
import ProfileView from 'src/views/pages/ProfileView';
1212
import ApplicationsView from 'src/views/pages/ApplicationsView';
13+
import BlogsView from 'src/views/pages/BlogsView';
14+
import Blog from 'src/views/pages/BlogsView/Blog';
1315
import Error404View from 'src/views/pages/Error404View';
1416
import StudentDashboardView from 'src/views/pages/StudentDashboardView';
1517
import EditProfileView from 'src/views/pages/StudentDashboardView/EditProfile';
@@ -85,6 +87,24 @@ const renderRoutes = () => (
8587
</MainLayout>
8688
)}
8789
/>
90+
<Route
91+
path="/blogs"
92+
exact
93+
render={props => (
94+
<MainLayout>
95+
<BlogsView {...props} />
96+
</MainLayout>
97+
)}
98+
/>
99+
<Route
100+
path="/blog"
101+
exact
102+
render={props => (
103+
<MainLayout>
104+
<Blog {...props} />
105+
</MainLayout>
106+
)}
107+
/>
88108

89109
<Route
90110
path="/courses"

‎src/components/Hero/HeroWithOneButton.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const useStyles = makeStyles(theme => ({
99
root: {
1010
minHeight: '350px',
1111
color: '#FFF',
12-
padding: '100px 70px',
12+
padding: '127px 70px',
1313
[theme.breakpoints.down('md')]: {
1414
paddingLeft: 15,
1515
paddingRight: 15
@@ -39,6 +39,7 @@ const useStyles = makeStyles(theme => ({
3939
function Hero({
4040
title,
4141
subtitle,
42+
subtitleDesign,
4243
className, // className
4344
backgroundImage = null, // Link to the background image if any
4445
component = null, // The Button or any component provided
@@ -52,18 +53,23 @@ function Hero({
5253
<div
5354
className={clsx(classes.root, className)}
5455
style={{
55-
backgroundImage: `${backgroundImage}`,
56+
backgroundImage: `url(${backgroundImage})`,
5657
backgroundSize: 'cover',
57-
backgroundRepeat: 'no-repeat',
58-
backgroundPositionY: 'center'
58+
backgroundRepeat: 'no-repeat'
5959
}}
6060
{...rest}
6161
>
6262
<Container maxWidth="lg">
6363
<div className={classes.main}>
64-
<Typography variant="h1">{title}</Typography>
64+
<Typography align="center" variant="h2">
65+
{title}
66+
</Typography>
6567
<Box mt={2}>
66-
<Typography variant="body1" align="center">
68+
<Typography
69+
className={subtitleDesign}
70+
variant="body1"
71+
align="center"
72+
>
6773
{subtitle}
6874
</Typography>
6975
</Box>
@@ -93,6 +99,7 @@ function Hero({
9399
Hero.propTypes = {
94100
title: PropTypes.string,
95101
subtitle: PropTypes.string,
102+
subtitleDesign: PropTypes.string,
96103
className: PropTypes.string,
97104
backgroundImage: PropTypes.string,
98105
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func])

‎src/components/Hero/HeroWithTextField.js

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
5+
import {
6+
Box,
7+
Container,
8+
Typography,
9+
makeStyles,
10+
Grid,
11+
Button,
12+
CircularProgress
13+
} from '@material-ui/core';
14+
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
15+
16+
const useStyles = makeStyles(theme => ({
17+
root: {
18+
minHeight: '300px',
19+
color: '#FFF',
20+
padding: '100px 70px',
21+
[theme.breakpoints.down('md')]: {
22+
paddingLeft: 15,
23+
paddingRight: 15
24+
}
25+
},
26+
main: {
27+
display: 'flex',
28+
flexDirection: 'column',
29+
justifyContent: 'center',
30+
padding: '0px',
31+
color: '#FFF'
32+
},
33+
btn: {
34+
backgroundColor: '#A60000',
35+
color: '#ffffff',
36+
textTransform: 'capitalize',
37+
[theme.breakpoints.down('sm')]: {
38+
width: '100%'
39+
},
40+
'&:hover': {
41+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
42+
}
43+
},
44+
textField: {
45+
marginBottom: '20px',
46+
marginTop: '8px',
47+
backgroundColor: '#ECECEC',
48+
borderBlockColor: 'green',
49+
borderColor: 'green',
50+
'& .MuiOutlinedInput-notchedOutline': {
51+
borderColor: '#ECECEC'
52+
},
53+
[theme.breakpoints.down('sm')]: {
54+
marginBottom: '0px'
55+
}
56+
},
57+
extraPadding: {
58+
[theme.breakpoints.down('md')]: {
59+
marginTop: '12px'
60+
}
61+
}
62+
}));
63+
64+
function Hero({
65+
title,
66+
subtitle,
67+
subtitleDesign,
68+
className, // className
69+
backgroundImage = null, // Link to the background image if any
70+
component = null, // The Button or any component provided
71+
...rest
72+
}) {
73+
const classes = useStyles();
74+
75+
return (
76+
<div>
77+
<div
78+
className={clsx(classes.root, className)}
79+
style={{
80+
backgroundImage: `url(${backgroundImage})`,
81+
backgroundSize: 'cover',
82+
backgroundRepeat: 'no-repeat'
83+
}}
84+
{...rest}
85+
>
86+
<Container maxWidth="lg">
87+
<div className={classes.main}>
88+
<Typography variant="h2">{title}</Typography>
89+
<Box mt={2}>
90+
<Typography className={subtitleDesign} variant="body1">
91+
{subtitle}
92+
</Typography>
93+
</Box>
94+
<Box mt={2}>{component != null ? component : <></>}</Box>
95+
</div>
96+
<Form />
97+
<Typography
98+
display="block"
99+
className={classes.extraPadding}
100+
variant="caption"
101+
>
102+
By clicking ‘subscribe’ , I agree to Code For Cause’s Terms &
103+
Privacy Policy.
104+
</Typography>
105+
</Container>
106+
</div>
107+
</div>
108+
);
109+
}
110+
111+
function Form() {
112+
const classes = useStyles();
113+
const [formData, updateFormData] = useState({});
114+
const [submitting, setSubmitting] = useState(0);
115+
116+
// const { enqueueSnackbar } = useSnackbar();
117+
118+
const handleChange = event => {
119+
updateFormData({
120+
...formData,
121+
[event.target.name]: event.target.value
122+
});
123+
};
124+
125+
const handleSubmit = e => {
126+
setSubmitting(1);
127+
e.preventDefault();
128+
};
129+
130+
return (
131+
<ValidatorForm onSubmit={handleSubmit}>
132+
<Typography variant="caption">Email Id</Typography>
133+
<Grid container spacing={3} xs={12} sm={12} md={12}>
134+
<Grid item sm={10} xs={12}>
135+
<TextValidator
136+
key="email"
137+
className={classes.textField}
138+
variant="outlined"
139+
value={formData.email}
140+
fullWidth
141+
name="email"
142+
onChange={handleChange}
143+
validators={['required', 'isEmail']}
144+
errorMessages={['This is a required field', 'Ender a valid Email']}
145+
/>
146+
</Grid>
147+
<Grid item sm={2} xs={12}>
148+
{submitting === 0 ? (
149+
<Button
150+
fullWidth
151+
type="submit"
152+
variant="contained"
153+
color="secondary"
154+
size="large"
155+
style={{
156+
marginTop: '7px',
157+
textTransform: 'capitalize',
158+
padding: '16.8px'
159+
}}
160+
>
161+
<Typography variant="h6" style={{ fontWeight: 600 }}>
162+
Subscribe
163+
</Typography>
164+
</Button>
165+
) : (
166+
<div className={classes.submissions}>
167+
<CircularProgress />
168+
</div>
169+
)}
170+
</Grid>
171+
</Grid>
172+
</ValidatorForm>
173+
);
174+
}
175+
176+
Hero.propTypes = {
177+
title: PropTypes.string,
178+
subtitle: PropTypes.string,
179+
subtitleDesign: PropTypes.string,
180+
className: PropTypes.string,
181+
backgroundImage: PropTypes.string,
182+
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
183+
};
184+
185+
export default Hero;

‎src/data/blogs/index.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const blogs = [
2+
{
3+
title: 'Data Structures',
4+
img: '/static/images/projects/p2.png',
5+
desc: 'Functions, arrays and more...',
6+
date: 'Jun 18, 2019',
7+
time: '7 min Read',
8+
author: 'Anuj Garg'
9+
},
10+
{
11+
title: 'Data Structures',
12+
img: '/static/images/projects/p2.png',
13+
desc: 'Functions, arrays and more...',
14+
date: 'Jun 18, 2019',
15+
time: '7 min Read',
16+
author: 'Kunal Kushwaha'
17+
},
18+
{
19+
title: 'Data Structures',
20+
img: '/static/images/projects/p2.png',
21+
desc: 'Functions, arrays and more...',
22+
date: 'Jun 18, 2019',
23+
time: '7 min Read',
24+
author: 'Ganga Chatrvedi'
25+
}
26+
];
27+
28+
export default blogs;

‎src/data/bootcamps/js/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
21
import { instagram } from './instagram';
3-
const information = { title : "JavaScript", camps:[instagram] };
2+
const information = { title: 'JavaScript', camps: [instagram] };
43

54
export default information;

‎src/theme/typography.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default {
2727
letterSpacing: '-0.05px'
2828
},
2929
h6: {
30-
fontWeight: 600,
30+
fontWeight: 700,
3131
fontSize: 14,
3232
letterSpacing: '-0.05px'
3333
},

0 commit comments

Comments
 (0)