FinalProject/src/pages/OurTeamPage.jsx

import Footer from "../components/Footer";
import Breadcrumb from "../components/Breadcrumbs";
import Header from "../components/Header";
import {Box, Container, Grid, Typography, useMediaQuery} from "@mui/material";
import FacebookIcon from "@mui/icons-material/Facebook";
import InstagramIcon from "@mui/icons-material/Instagram";
import TwitterIcon from "@mui/icons-material/Twitter";
import YouTubeIcon from "@mui/icons-material/YouTube";
import Social from "../components/SocialLink";
import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
import EmailIcon from '@mui/icons-material/Email';
import rom from "../img/our team/romb.png"
import one from "../img/our team/1.jpg"
import two from "../img/our team/2.jpg"
import three from "../img/our team/3.jpg"
import four from "../img/our team/4.jpg"

let defaultTeam = [
    {
        img: one,
        name: 'MARIA CULHANE',
        spec: 'online seller',
        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
        links: [
            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
            {icon: TwitterIcon, url: 'https://twitter.com/home'},
            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
        ],
        phone: '+123 456 77 88',
        email: 'info@gmail.com'
    },
    {
        img: two,
        name: 'EMERY HERWITZ',
        spec: 'online seller',
        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
        links: [
            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
            {icon: TwitterIcon, url: 'https://twitter.com/home'},
            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
        ],
        phone: '+123 456 77 88',
        email: 'info@gmail.com'
    },
    {
        img: three,
        name: 'ALLISON WORKMAN',
        spec: 'online seller',
        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
        links: [
            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
            {icon: TwitterIcon, url: 'https://twitter.com/home'},
            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
        ],
        phone: '+123 456 77 88',
        email: 'info@gmail.com'
    },
    {
        img: four,
        name: 'MADELYN BATOR',
        spec: 'online seller',
        desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus blanditiis distinctio eum mollitia nisi nostrum nulla omnis quia, veniam!',
        links: [
            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
            {icon: TwitterIcon, url: 'https://twitter.com/home'},
            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
        ],
        phone: '+123 456 77 88',
        email: 'info@gmail.com'
    }
]

const ItemTeam = ({item: {img, name, spec, desc, links, phone, email}, breakpoint}) => {
    return (
        <Grid sx={{
            backgroundColor: '#fff',
            marginBottom: '50px'
        }}
              item xs={12} sm={5.5}
        >
            <Box>
                <img style={{maxWidth: '100%'}} src={img} alt='face'/>
            </Box>
            <Box
                display='flex'
                flexDirection='column'
                justifyContent='center'
                alignItems='center'
                padding='50px'
            >
                <Typography
                    textAlign="center"
                    variant='h5'
                    fontFamily='sarif'
                    letterSpacing='7px'
                    marginBottom='10px'
                >
                    {name}
                </Typography>
                <img style={{
                    width: '7px',
                    maxHeight: '7px',
                }} src={rom} alt='item'/>
                <Typography
                    textAlign="center"
                    variant='body1'
                    letterSpacing='5px'
                    marginBottom='10px'
                    marginTop='8px'
                    color="#616161"
                >
                    {spec}
                </Typography>
                <Typography
                    textAlign="center"
                    variant='body2'
                    marginBottom='30px'
                    fontWeight='300'
                    color="#616161"
                    lineHeight='1.7em'
                >
                    {desc}
                </Typography>
                <Box marginBottom='30px'>
                    {links.map(item => <Social Icon={item.icon} link={item.url}/>)}
                </Box>
                <Box
                    display='flex'
                    flexDirection={breakpoint? 'column': 'row'}
                    justifyContent='space-between'
                    alignItems='center'
                    width='100%'
                >
                    <Typography
                        variant='body2'
                        fontWeight='400'
                        color="#616161"
                        display='flex'
                        flexDirection='row'
                        justifyContent='space-between'
                        alignItems='center'
                        marginBottom={breakpoint ? '15px': '0'}
                    >
                        <LocalPhoneIcon sx={{width: '15px', marginRight: '5px'}}/>
                        {phone}
                    </Typography>
                    <Typography
                        variant='body2'
                        fontWeight='400'
                        color="#616161"
                        display='flex'
                        flexDirection='row'
                        justifyContent='space-between'
                        alignItems='center'
                    >
                        <EmailIcon sx={{maxWidth: '15px', marginRight: '5px'}}/>
                        {email}
                    </Typography>
                </Box>
            </Box>
        </Grid>
    )
}

const OurTeamPage = ({specialist=defaultTeam}) => {
    const matches = useMediaQuery('(max-width:768px)');
    return (
        <>
            <Header/>
            <Breadcrumb links={['our team']}/>
            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                <Container maxWidth="lg">
                    <Grid sx={{padding: '0px 0px'}} container justifyContent='space-between'>
                        {(specialist).map(item =>  <ItemTeam item={item} breakpoint={matches}/>)}
                    </Grid>
                </Container>
            </main>
            <Footer/>
        </>
    )
}
export default OurTeamPage