Skip to content

Commit d0102db

Browse files
pooriasetpooriaset
committed
feat: complete footer
1 parent 4f198b8 commit d0102db

File tree

12 files changed

+265
-39
lines changed

12 files changed

+265
-39
lines changed

‎public/assets/images/bale-black.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎public/assets/images/placeholders/placeholder.svg‎

Lines changed: 4 additions & 1 deletion
Loading

‎src/components/Footer/components/BadgeImage.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { styled } from '@mui/material';
2+
3+
export const BadgeImage = styled('a')<{}>(({ theme }) => ({
4+
display: 'flex',
5+
alignItems: 'center',
6+
justifyContent: 'center',
7+
border: '1px solid',
8+
borderColor: theme.palette.divider,
9+
borderRadius: theme.spacing(1),
10+
width: 110,
11+
height: 125,
12+
}));
13+
14+
export default BadgeImage;

‎src/components/Footer/components/DesktopFooter.tsx‎

Lines changed: 82 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
11
'use client';
22

3+
import Image from '@/components/common/Image';
34
import Logo from '@/components/common/Logo';
45
import { IPageListItem } from '@/graphql/types/common';
56
import { KeyboardArrowUp } from '@mui/icons-material';
6-
import { Box, Button, Container, Link, Stack, Typography } from '@mui/material';
7+
import {
8+
Box,
9+
Button,
10+
Container,
11+
Divider,
12+
Link,
13+
Stack,
14+
Tooltip,
15+
Typography,
16+
} from '@mui/material';
717
import { useTranslations } from 'next-intl';
818
import { FC } from 'react';
19+
import BadgeImage from './BadgeImage';
20+
import Newsletter from './Newsletter';
21+
import SocialMedia from './SocialMedia';
922

1023
export interface FooterProps {
1124
pages: IPageListItem[];
@@ -21,6 +34,27 @@ const Footer: FC<FooterProps> = ({ pages }) => {
2134
});
2235
};
2336

37+
const badges = [
38+
{
39+
id: '1',
40+
src: null,
41+
title: 'Title',
42+
href: '#',
43+
},
44+
{
45+
id: '2',
46+
src: null,
47+
title: 'Title',
48+
href: '#',
49+
},
50+
{
51+
id: '3',
52+
src: null,
53+
title: 'Title',
54+
href: '#',
55+
},
56+
];
57+
2458
return (
2559
<Box
2660
component="footer"
@@ -41,44 +75,63 @@ const Footer: FC<FooterProps> = ({ pages }) => {
4175
endIcon={<KeyboardArrowUp />}
4276
sx={{
4377
width: 'fit-content',
78+
borderColor: 'divider',
4479
}}
4580
>
4681
{t('buttons.backToUp')}
4782
</Button>
4883
</Stack>
49-
<Stack
50-
direction="row"
51-
alignItems="center"
52-
justifyContent="space-between"
53-
>
54-
<Box
55-
sx={{
56-
display: 'flex',
57-
alignItems: 'center',
58-
justifyContent: 'center',
59-
}}
60-
>
61-
<Typography variant="body2">{t('footer.text')}</Typography>
62-
</Box>
6384

64-
<Typography
65-
variant="body2"
66-
align="center"
67-
sx={{ display: 'flex', alignItems: 'center', gap: 2 }}
68-
>
69-
{pages.map((page) => {
85+
<Stack direction="row" justifyContent="space-between">
86+
<Stack spacing={4}>
87+
<SocialMedia />
88+
<Newsletter />
89+
</Stack>
90+
91+
<Stack spacing={1}>
92+
<Typography variant="h6">لینک های مفید</Typography>
93+
<Stack spacing={1}>
94+
{pages.map((page) => {
95+
return (
96+
<Link key={page.title} href={`/pages/${page.slug}`}>
97+
{page.title}
98+
</Link>
99+
);
100+
})}
101+
102+
<Link href="#">{t('footer.links.aboutUs')}</Link>
103+
104+
<Link href="#">{t('footer.links.contactUs')}</Link>
105+
</Stack>
106+
</Stack>
107+
108+
<Stack spacing={1} direction="row">
109+
{badges.map((badge) => {
70110
return (
71-
<Link key={page.title} href={`/pages/${page.slug}`}>
72-
{page.title}
73-
</Link>
111+
<Tooltip title={badge.title} key={badge.id}>
112+
<BadgeImage href={badge.href}>
113+
<Image
114+
width={100}
115+
height={100}
116+
src={badge.src}
117+
alt={badge.title}
118+
/>
119+
</BadgeImage>
120+
</Tooltip>
74121
);
75122
})}
76-
77-
<Link href="#">{t('footer.links.aboutUs')}</Link>
78-
79-
<Link href="#">{t('footer.links.contactUs')}</Link>
80-
</Typography>
123+
</Stack>
81124
</Stack>
125+
<Divider />
126+
127+
<Typography
128+
variant="body2"
129+
sx={{
130+
textAlign: 'center',
131+
}}
132+
>
133+
{t('footer.text')}
134+
</Typography>
82135
</Stack>
83136
</Container>
84137
</Box>

‎src/components/Footer/components/Newsletter.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Button, Stack, TextField, Typography } from '@mui/material';
2+
import { useTranslations } from 'next-intl';
3+
import React from 'react';
4+
import { Controller, useForm } from 'react-hook-form';
5+
6+
const Newsletter = () => {
7+
const t = useTranslations();
8+
const form = useForm();
9+
10+
return (
11+
<Stack component="form" spacing={1}>
12+
<Typography variant="h6">{t('footer.newsletter.title')}</Typography>
13+
<Stack spacing={1} alignItems="center" direction="row">
14+
<Controller
15+
name="email"
16+
control={form.control}
17+
render={(props) => {
18+
const {
19+
field: { name, value },
20+
fieldState: { error },
21+
} = props;
22+
return (
23+
<TextField
24+
name={name}
25+
value={value}
26+
placeholder={t('pages.login.email')}
27+
variant="outlined"
28+
size="small"
29+
fullWidth
30+
error={!!error?.message}
31+
helperText={error?.message?.toString()}
32+
/>
33+
);
34+
}}
35+
/>
36+
<Button color="primary" variant="contained">
37+
{t('buttons.submit')}
38+
</Button>
39+
</Stack>
40+
</Stack>
41+
);
42+
};
43+
44+
export default Newsletter;

‎src/components/Footer/components/SocialMedia.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import FilledBale from '@/components/Icons/components/Use/FilledBale';
2+
import { Email, Instagram, Phone, Telegram } from '@mui/icons-material';
3+
import { Stack, Tooltip, Typography } from '@mui/material';
4+
import { useTranslations } from 'next-intl';
5+
import SocialMediaButton from './SocialMediaButton';
6+
7+
const socialMediaButtons = [
8+
{
9+
id: 'instagram',
10+
title: 'Instagram',
11+
icon: <Instagram />,
12+
link: '#',
13+
},
14+
{
15+
id: 'telegram',
16+
title: 'Telegram',
17+
icon: <Telegram />,
18+
link: '#',
19+
},
20+
{
21+
id: 'bale',
22+
title: 'Bale',
23+
icon: <FilledBale />,
24+
link: '#',
25+
},
26+
{
27+
id: 'phone',
28+
title: 'Phone',
29+
icon: <Phone />,
30+
link: '#',
31+
},
32+
{
33+
id: 'email',
34+
title: 'Email',
35+
icon: <Email />,
36+
link: '#',
37+
},
38+
];
39+
40+
const SocialMedia = () => {
41+
const t = useTranslations();
42+
43+
return (
44+
<Stack spacing={1}>
45+
<Typography variant="h6">{t('footer.links.contactUs')}</Typography>
46+
<Stack direction="row" spacing={1}>
47+
{socialMediaButtons.map((button) => {
48+
return (
49+
<Tooltip key={button.id} title={button.title}>
50+
<a href={button.link}>
51+
<SocialMediaButton size="small">
52+
{button.icon}
53+
</SocialMediaButton>
54+
</a>
55+
</Tooltip>
56+
);
57+
})}
58+
</Stack>
59+
</Stack>
60+
);
61+
};
62+
63+
export default SocialMedia;

‎src/components/Footer/components/SocialMediaButton.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { IconButton, styled } from '@mui/material';
2+
3+
export const SocialMediaButton = styled(IconButton)<{}>(({ theme }) => ({
4+
border: '1px solid',
5+
borderColor: theme.palette.divider,
6+
width: 36,
7+
height: 36,
8+
}));
9+
10+
export default SocialMediaButton;

‎src/components/Icons/components/IconsSymbols.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,19 @@ const IconsSymbols = () => {
2929
>
3030
<circle cx="8" cy="8" r="2"></circle>
3131
</symbol>
32+
33+
<symbol
34+
id="filledBale"
35+
xmlns="http://www.w3.org/2000/svg"
36+
viewBox="0 0 1000 999.63"
37+
>
38+
<g>
39+
<path
40+
d="M1009.65,466.44c-1.3-21.39-5-42.79-9.7-63.78C987.56,346,964.66,291.8,933.47,242.91,863.09,132.24,747.53,51,619,24a411.57,411.57,0,0,0-57.28-9.1,443.14,443.14,0,0,0-76.38-1.7,388.45,388.45,0,0,0-61.88,7.2c-18.7,2.6-36.89,7.8-55,12.69-16.9,5.3-33.69,11.3-50.09,18.2a469.62,469.62,0,0,0-45.78,22.09,437.61,437.61,0,0,0-42.69,26.29,100.06,100.06,0,0,1-10.6,6.8c-34.19-26-68.78-51.38-104.77-74.77-9.89-6.1-19.49-13-30.59-16.7-18.19-6.4-39.48-1.5-53.78,11.5C16.55,38.57,10.66,57.37,12.26,75.26c.1,23.79-.1,47.69.2,71.48-.3,24-.1,48.18-.2,72.18s-.1,48,.1,72q-.3,42,0,83.87-.3,40.78.1,81.57c.2,34-1.6,68.18,2.19,102.07,2.7,34.89,9.9,69.48,20.3,102.77,47.38,154.85,175.24,283,330.8,328.3l.1.6c32.39,9.6,65.68,16.7,99.27,19.29,37.28,3.6,75.07,3.5,112.16-2.19,19.9-1.5,39.39-6.4,58.88-10.7A566.24,566.24,0,0,0,702,974.59c20.1-8.6,40-17.9,58.89-29.1a455,455,0,0,0,48.38-31.59,496.83,496.83,0,0,0,51.28-43.48,486.75,486.75,0,0,0,35.19-38A500,500,0,0,0,926.27,792c8.6-12.79,16.6-26.09,24.3-39.49,7.89-15.19,15.49-30.39,22.29-46.08,7.4-18.8,14.7-37.69,19.89-57.18,4.4-16,9.2-32,10.8-48.49,4.2-17.39,6.1-35.69,6.8-53.48A412.52,412.52,0,0,0,1009.65,466.44ZM826.51,400.86c-6.1,16.2-16.8,30.09-29.5,41.69-11.09,11-22.09,22.09-33.19,33.19-11.79,11.79-23.59,23.49-35.28,35.39-11.3,11.19-22.6,22.39-33.89,33.79-12.3,12.29-24.7,24.59-36.89,36.89-14,14.09-28.09,28-42.09,42.08-13.2,13.3-26.49,26.49-39.79,39.79s-26.79,26.69-40.09,40.09c-12.29,11.79-23.49,24.89-37.38,35a105.49,105.49,0,0,1-57.89,16c-23.59-1.5-46.68-10.79-63.68-27.39q-78.42-78.42-156.95-157c-12.79-12.7-21.39-29.09-26-46.39-4.8-23.89-2-49.48,10.3-70.77,9.39-16.5,23.79-29.6,40.18-39a107.88,107.88,0,0,1,57.89-9.7c21.39,3.2,41.88,13,56.88,28.79,28.39,28.39,56.68,56.88,85.27,85.18,8.6-8.2,16.9-16.8,25.1-25.3,12-11.49,23.79-23.29,35.28-35.39,11.4-10.59,22.3-21.79,33.09-33.09,7.7-6.89,14.7-14.49,22.1-21.79,12-11.7,23.69-23.59,35.39-35.49,11.29-10.79,22.19-22,33.09-33,11.79-11.49,23.29-23.29,35-34.89a106.64,106.64,0,0,1,42.18-26.39A107.77,107.77,0,0,1,768,274.5c25.7,9.8,46.29,30,57.59,54.88C833.9,352.28,834.9,377.87,826.51,400.86Z"
41+
transform="translate(-12 -12.19)"
42+
/>
43+
</g>
44+
</symbol>
3245
</svg>
3346
);
3447
};

‎src/components/Icons/components/Use/FilledBale.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { FC } from 'react';
2+
3+
export interface FilledBaleProps {
4+
color?: string;
5+
}
6+
const FilledBale: FC<FilledBaleProps> = ({ color = null }) => {
7+
return (
8+
<svg style={{ width: 20, height: 20, fill: color || 'currentcolor' }}>
9+
<use xlinkHref="#filledBale"></use>
10+
</svg>
11+
);
12+
};
13+
14+
export default FilledBale;

‎src/components/common/Image.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,9 @@ const Image: FC<
4242
onLoad={handleOnLoad}
4343
style={{
4444
maxWidth: '100%',
45-
objectFit: 'contain',
4645
...props.style,
4746
visibility: loaded ? 'visible' : 'hidden',
48-
height: loaded ? undefined : 0,
47+
objectFit: !src ? 'contain' : props.style?.objectFit || 'contain',
4948
}}
5049
/>
5150
</>

0 commit comments

Comments
 (0)