Skip to content

Commit d244be3

Browse files
MiguelOcegueraMMiguelOcegueraM
authored
Merge pull request #1 from webdevtalks/users/miguelocegueram/footer
💄 Added Footer and created a Icons component for easy maintanance
2 parents 5f99961 + 8fdd65b commit d244be3

File tree

5 files changed

+141
-32
lines changed

5 files changed

+141
-32
lines changed

‎src/About.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import image23 from './assets/images/23.jpg'
2828
import image24 from './assets/images/24.jpg'
2929
import NavBar from './NavBar'
3030
import Carousel from 'react-material-ui-carousel'
31+
import Footer from './Footer';
3132

3233
function About() {
3334
const { t } = useTranslation()
@@ -113,6 +114,7 @@ function About() {
113114
<LazyLoadImage src={image24} alt={''} style={{ height: '100%', width: '100%', objectFit: 'cover' }} />
114115
</Carousel>
115116
</Container>
117+
<Footer/>
116118
</>
117119
)
118120
}

‎src/Footer.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import logo from './assets/images/logo.png';
2+
import { Link } from 'react-router-dom'
3+
import { Box, Grid, Typography, Avatar } from '@mui/material';
4+
import Icons from './Icons';
5+
6+
const Footer = () => {
7+
return (
8+
<Box
9+
sx={{
10+
backgroundColor: 'black',
11+
padding: 5,
12+
color: 'white',
13+
position: "sticky",
14+
}}
15+
>
16+
<Grid container justifyContent="space-between" alignItems="center" >
17+
<Grid
18+
item
19+
xs={12}
20+
md={6}
21+
sx={{
22+
display: { xs: 'none', md: 'block' },
23+
textAlign: 'left',
24+
}}
25+
>
26+
<Link to="/" style={{ textDecoration: 'none', paddingLeft: '5rem', flexShrink: 0 }}>
27+
<Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '100px' }} />
28+
</Link>
29+
</Grid>
30+
<Grid
31+
item
32+
xs={12}
33+
md={6}
34+
sx={{
35+
textAlign: { xs: 'center', md: 'right' },
36+
}}
37+
>
38+
<Icons color={"#ffff"}/>
39+
</Grid>
40+
</Grid>
41+
</Box>
42+
);
43+
};
44+
45+
export default Footer;

‎src/Home.tsx

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,29 @@
11
import { type ReactElement } from 'react'
2-
import { Box, Container, Avatar, IconButton, Link } from '@mui/material'
3-
import FacebookIcon from '@mui/icons-material/Facebook'
4-
import InstagramIcon from '@mui/icons-material/Instagram'
5-
import XIcon from '@mui/icons-material/X'
6-
import LinkedInIcon from '@mui/icons-material/LinkedIn'
7-
import EmailIcon from '@mui/icons-material/Email'
8-
import PatreonIcon from './PatreonIcon'
2+
import { Box, Container, Avatar } from '@mui/material'
93
import NavBar from './NavBar';
4+
import Footer from './Footer';
5+
import Icons from './Icons';
106
import logo from './assets/images/logo.png'
117

128
const Home = (): ReactElement => {
139
return (
14-
<>
10+
<Box
11+
sx={{
12+
display: 'flex',
13+
flexDirection: 'column',
14+
minHeight: '100vh',
15+
}}
16+
>
1517
<NavBar />
16-
<Container sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
18+
<Container sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1 }}>
1719
<Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '100px', padding: 3 }}>
1820
<Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '500px' }} />
1921
</Box>
20-
<Box>
21-
<IconButton component={Link} href="https://www.facebook.com/ColimaWebDevTalks" target="_blank">
22-
<FacebookIcon fontSize="large" />
23-
</IconButton>
24-
<IconButton component={Link} href="https://www.instagram.com/webdevtalksmx" target="_blank">
25-
<InstagramIcon fontSize="large" />
26-
</IconButton>
27-
<IconButton component={Link} href="https://twitter.com/webdevtalksmx" target="_blank">
28-
<XIcon fontSize="large" />
29-
</IconButton>
30-
<IconButton component={Link} href="https://www.linkedin.com/company/web-dev-talks" target="_blank">
31-
<LinkedInIcon fontSize="large" />
32-
</IconButton>
33-
<IconButton component={Link} href="https://patreon.com/WebDevTalksColima" target="_blank">
34-
<PatreonIcon/>
35-
</IconButton>
36-
<IconButton component={Link} href="mailto:[email protected]" target="_blank">
37-
<EmailIcon fontSize="large" />
38-
</IconButton>
39-
</Box>
22+
<Icons color={"#8d8d8d"}/>
4023
</Container>
41-
</>
42-
)
24+
<Footer/>
25+
</Box>
26+
) as ReactElement;
4327
}
4428

4529
export default Home

‎src/Icons.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { FC, ReactElement } from 'react';
2+
import { Box, IconButton, Link } from '@mui/material';
3+
import FacebookIcon from '@mui/icons-material/Facebook';
4+
import InstagramIcon from '@mui/icons-material/Instagram';
5+
import XIcon from '@mui/icons-material/X';
6+
import LinkedInIcon from '@mui/icons-material/LinkedIn';
7+
import EmailIcon from '@mui/icons-material/Email';
8+
import PatreonIcon from './PatreonIcon';
9+
10+
interface IconsProps {
11+
color: {
12+
facebook?: string;
13+
instagram?: string;
14+
twitter?: string;
15+
linkedin?: string;
16+
patreon?: string;
17+
email?: string;
18+
};
19+
}
20+
21+
const Icons: FC<IconsProps> = ({ color }) => {
22+
return (
23+
<Box>
24+
<IconButton
25+
component={Link}
26+
href="https://www.facebook.com/ColimaWebDevTalks"
27+
target="_blank"
28+
sx={{ color: color?.facebook || 'inherit' }}
29+
>
30+
<FacebookIcon fontSize="large" />
31+
</IconButton>
32+
<IconButton
33+
component={Link}
34+
href="https://www.instagram.com/webdevtalksmx"
35+
target="_blank"
36+
sx={{ color: color?.instagram || 'inherit' }}
37+
>
38+
<InstagramIcon fontSize="large" />
39+
</IconButton>
40+
<IconButton
41+
component={Link}
42+
href="https://twitter.com/webdevtalksmx"
43+
target="_blank"
44+
sx={{ color: color?.twitter || 'inherit' }}
45+
>
46+
<XIcon fontSize="large" />
47+
</IconButton>
48+
<IconButton
49+
component={Link}
50+
href="https://www.linkedin.com/company/web-dev-talks"
51+
target="_blank"
52+
sx={{ color: color?.linkedin || 'inherit' }}
53+
>
54+
<LinkedInIcon fontSize="large" />
55+
</IconButton>
56+
<IconButton
57+
component={Link}
58+
href="https://patreon.com/WebDevTalksColima"
59+
target="_blank"
60+
sx={{ color: color?.patreon || 'inherit' }}
61+
>
62+
<PatreonIcon />
63+
</IconButton>
64+
<IconButton
65+
component={Link}
66+
href="mailto:[email protected]"
67+
target="_blank"
68+
sx={{ color: color?.email || 'inherit' }}
69+
>
70+
<EmailIcon fontSize="large" />
71+
</IconButton>
72+
</Box>
73+
) as ReactElement;
74+
};
75+
76+
export default Icons;

‎src/Sponsorship.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import miguelUrbina from './assets/images/patreons/miguel_urbina.jpeg'
3232
import oscarSwanros from './assets/images/patreons/oscar_swanros.jpg'
3333
import sorielVallejo from './assets/images/patreons/soriel_vallejo.png'
3434
import logo from './assets/images/logo.png'
35+
import Footer from './Footer';
3536

3637
import AccessTimeIcon from '@mui/icons-material/AccessTime'
3738
import ShareIcon from '@mui/icons-material/Share'
@@ -372,8 +373,9 @@ const Sponsorship = (): ReactElement => {
372373
<Typography variant="caption" paragraph>{t("sponsorship.contact1")} <Link href="mailto:[email protected]">[email protected]</Link> {t("sponsorship.contact2")}</Typography>
373374
</Box>
374375
</Container>
376+
<Footer/>
375377
</>
376-
)
378+
) as ReactElement;
377379
}
378380

379381
export default Sponsorship

0 commit comments

Comments
 (0)