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

Commit 0ebe2e2

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Take out Hero and button as a reusable component (#98)
* Take out Hero and button as a reusable component * fixed pixel perfect things * fixed netlify build with removing all unused variables
1 parent da999a6 commit 0ebe2e2

8 files changed

Lines changed: 383 additions & 468 deletions

File tree

‎src/components/Button/ButtonComponent.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Button, makeStyles } from '@material-ui/core';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
import clsx from 'clsx';
5+
6+
const useStyles = makeStyles(theme => ({
7+
btn: {
8+
backgroundColor: '#A60000',
9+
color: '#ffffff',
10+
textTransform: 'capitalize',
11+
[theme.breakpoints.down('sm')]: {
12+
width: '100%'
13+
},
14+
'&:hover': {
15+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
16+
}
17+
}
18+
}));
19+
20+
function ButtonComponent({ className, title, icon, ...rest }) {
21+
const classes = useStyles();
22+
return (
23+
<Button className={clsx(classes.btn, className)} {...rest}>
24+
{icon}
25+
{title}
26+
</Button>
27+
);
28+
}
29+
30+
ButtonComponent.propTypes = {
31+
title: PropTypes.string
32+
};
33+
34+
export default ButtonComponent;

‎src/components/Hero/HeroWithLogo.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
4+
import {
5+
Box,
6+
Container,
7+
Grid,
8+
Hidden,
9+
Typography,
10+
makeStyles
11+
} from '@material-ui/core';
12+
13+
import { horizontalGradient } from '../../constants/index';
14+
15+
const useStyles = makeStyles(theme => ({
16+
root: {
17+
color: '#FFF',
18+
background: horizontalGradient,
19+
paddingTop: 80,
20+
paddingBottom: 60,
21+
paddingLeft: 70,
22+
paddingRight: 70,
23+
[theme.breakpoints.down('md')]: {
24+
paddingLeft: 15,
25+
paddingRight: 15
26+
}
27+
},
28+
extraPadding: {
29+
padding: '0 70px 0px 0px',
30+
textAlign: 'justify',
31+
[theme.breakpoints.down('sm')]: {
32+
padding: '0'
33+
}
34+
},
35+
image: {
36+
perspectiveOrigin: 'left center',
37+
transformStyle: 'preserve-3d',
38+
perspective: 1500,
39+
'& > img': {
40+
maxWidth: '100%',
41+
height: 'auto',
42+
backfaceVisibility: 'hidden'
43+
},
44+
[theme.breakpoints.down('md')]: {
45+
alignItems: 'center',
46+
display: 'flex',
47+
flexDirection: 'column',
48+
height: '100%',
49+
justifyContent: 'center'
50+
}
51+
},
52+
hide: {
53+
display: 'none'
54+
}
55+
}));
56+
57+
function Hero({
58+
title,
59+
title2,
60+
subtitle,
61+
firstComponent,
62+
secondComponent,
63+
imageUrl,
64+
...rest
65+
}) {
66+
const classes = useStyles();
67+
68+
return (
69+
<div className={clsx(classes.root)} {...rest}>
70+
<Container maxWidth="lg">
71+
<Grid container spacing={3}>
72+
<Grid item xs={12} md={6}>
73+
<Box
74+
display="flex"
75+
flexDirection="column"
76+
justifyContent="center"
77+
height="100%"
78+
className={clsx(classes.extraPadding)}
79+
>
80+
<Typography variant="h1" gutterBottom>
81+
{title}
82+
</Typography>
83+
<Typography variant="h1"> {title2}</Typography>
84+
<Hidden mdUp>
85+
<Box mt={6} mb={2}>
86+
<div className={classes.image}>
87+
<img alt="codeforcauseimg" src={imageUrl} />
88+
</div>
89+
</Box>
90+
</Hidden>
91+
<Box mt={5}>{firstComponent}</Box>
92+
<Box mt={2} mb={3}>
93+
<Grid container xs={12} md={12}>
94+
<Grid item xs={12} md={12}>
95+
{secondComponent}
96+
</Grid>
97+
</Grid>
98+
</Box>
99+
</Box>
100+
</Grid>
101+
<Hidden smDown>
102+
<Grid item xs={12} md={6}>
103+
<Box>
104+
<div className={classes.image}>
105+
<img alt="codeforcauseimg" src={imageUrl} />
106+
</div>
107+
</Box>
108+
</Grid>
109+
</Hidden>
110+
</Grid>
111+
</Container>
112+
</div>
113+
);
114+
}
115+
116+
export default Hero;

‎src/components/Hero/HeroWithOneButton.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
5+
import { Box, Container, Typography, makeStyles } from '@material-ui/core';
6+
// import ApplyNowModal from './ApplyNowModal';
7+
8+
const useStyles = makeStyles(theme => ({
9+
root: {
10+
minHeight: '350px',
11+
color: '#FFF',
12+
padding: '100px 70px',
13+
[theme.breakpoints.down('md')]: {
14+
paddingLeft: 15,
15+
paddingRight: 15
16+
}
17+
},
18+
main: {
19+
display: 'flex',
20+
flexDirection: 'column',
21+
alignItems: 'center',
22+
justifyContent: 'center',
23+
padding: '0px',
24+
color: '#FFF'
25+
},
26+
btn: {
27+
backgroundColor: '#A60000',
28+
color: '#ffffff',
29+
textTransform: 'capitalize',
30+
[theme.breakpoints.down('sm')]: {
31+
width: '100%'
32+
},
33+
'&:hover': {
34+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
35+
}
36+
}
37+
}));
38+
39+
function Hero({
40+
title,
41+
subtitle,
42+
className, // className
43+
backgroundImage = null, // Link to the background image if any
44+
component = null, // The Button or any component provided
45+
...rest
46+
}) {
47+
const classes = useStyles();
48+
49+
return (
50+
<div>
51+
{backgroundImage ? (
52+
<div
53+
className={clsx(classes.root, className)}
54+
style={{
55+
backgroundImage: `url(${backgroundImage})`,
56+
backgroundSize: 'cover',
57+
backgroundRepeat: 'no-repeat'
58+
}}
59+
{...rest}
60+
>
61+
<Container maxWidth="lg">
62+
<div className={classes.main}>
63+
<Typography variant="h1">{title}</Typography>
64+
<Box mt={2}>
65+
<Typography variant="body1" align="center">
66+
{subtitle}
67+
</Typography>
68+
</Box>
69+
<Box mt={2}>{component != null ? component : <></>}</Box>
70+
</div>
71+
</Container>
72+
</div>
73+
) : (
74+
<div className={clsx(classes.root, className)} {...rest}>
75+
<Container maxWidth="lg">
76+
<div className={classes.main}>
77+
<Typography variant="h1">{title}</Typography>
78+
<Box mt={2}>
79+
<Typography variant="body1" align="center">
80+
{subtitle}
81+
</Typography>
82+
</Box>
83+
<Box mt={2}>{component != null ? component : <></>}</Box>
84+
</div>
85+
</Container>
86+
</div>
87+
)}
88+
</div>
89+
);
90+
}
91+
92+
Hero.propTypes = {
93+
title: PropTypes.string,
94+
subtitle: PropTypes.string,
95+
className: PropTypes.string,
96+
backgroundImage: PropTypes.string,
97+
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
98+
};
99+
100+
export default Hero;

‎src/constants/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,9 @@ export const THEMES = {
44
ONE_DARK: 'ONE_DARK',
55
UNICORN: 'UNICORN'
66
};
7+
8+
export const horizontalGradient =
9+
'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
10+
11+
export const verticalGradient =
12+
'linear-gradient(180.72deg, #180255 0.25%, #000000 97.54%)';

‎src/views/pages/CLView/Hero.js‎

Lines changed: 8 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,17 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import clsx from 'clsx';
4-
5-
import { Box, Container, Typography, makeStyles } from '@material-ui/core';
63
import ApplyNowModal from './ApplyNowModal';
7-
8-
const useStyles = makeStyles(theme => ({
9-
root: {
10-
minHeight: '350px',
11-
color: '#FFF',
12-
padding: '100px 70px',
13-
[theme.breakpoints.down('md')]: {
14-
paddingLeft: 15,
15-
paddingRight: 15
16-
}
17-
},
18-
main: {
19-
display: 'flex',
20-
flexDirection: 'column',
21-
alignItems: 'center',
22-
justifyContent: 'center',
23-
padding: '0px',
24-
color: '#FFF'
25-
},
26-
btn: {
27-
backgroundColor: '#A60000',
28-
color: '#ffffff',
29-
textTransform: 'capitalize',
30-
[theme.breakpoints.down('sm')]: {
31-
width: '100%'
32-
},
33-
'&:hover': {
34-
backgroundColor: 'rgba(166, 0, 0, 0.8)'
35-
}
36-
}
37-
}));
4+
import HeroWithOneButton from '../../../components/Hero/HeroWithOneButton';
385

396
function Hero({ className, ...rest }) {
40-
const classes = useStyles();
41-
427
return (
43-
<div
44-
className={clsx(classes.root, className)}
45-
style={{
46-
backgroundImage: 'url("/static/campusLeaders/hero.png")',
47-
backgroundSize: 'cover',
48-
backgroundRepeat: 'no-repeat'
49-
}}
50-
{...rest}
51-
>
52-
<Container maxWidth="lg">
53-
<div className={classes.main}>
54-
<Typography variant="h1">Campus Leaders</Typography>
55-
<Box mt={2}>
56-
<Typography variant="body1" align="center">
57-
Stand Up and fight for the Cause with the Code For Cause
58-
</Typography>
59-
</Box>
60-
<Box mt={2}>
61-
<ApplyNowModal />
62-
</Box>
63-
</div>
64-
</Container>
65-
</div>
8+
<HeroWithOneButton
9+
title="Campus Leader"
10+
subtitle="Stand Up and fight for the Cause with the Code For Cause"
11+
className
12+
backgroundImage="/static/campusLeaders/hero.png"
13+
component={<ApplyNowModal />}
14+
/>
6615
);
6716
}
6817

0 commit comments

Comments
 (0)