123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- import React from 'react';
- import {Box, Grid, Typography} from "@mui/material";
- import imgNotFound from "../../img/catalog/imgNotFound.png";
- import romb from "../../img/our-team/romb.png";
- import Social from "../../components/SocialLink";
- import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
- import EmailIcon from "@mui/icons-material/Email";
- export 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 || imgNotFound} 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 || 'no name' }
- </Typography>
- <img style={{
- width: '7px',
- maxHeight: '7px',
- }} src={romb} alt='item'/>
- <Typography
- textAlign='center'
- variant='body1'
- letterSpacing='5px'
- marginBottom='10px'
- marginTop='8px'
- color='#616161'
- >
- { spec || 'text' }
- </Typography>
- <Typography
- textAlign='center'
- variant='body2'
- marginBottom='30px'
- fontWeight='300'
- color='#616161'
- lineHeight='1.7em'
- >
- { desc || 'description' }
- </Typography>
- <Box marginBottom='30px'>
- {
- links.map(item => <Social key={item.url} 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 || '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 || 'email' }
- </Typography>
- </Box>
- </Box>
- </Grid>
- )
- }
|