55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import Card from '@mui/material/Card';
|
||
import CardActions from '@mui/material/CardActions';
|
||
import CardContent from '@mui/material/CardContent';
|
||
import CardMedia from '@mui/material/CardMedia';
|
||
import Button from '@mui/material/Button';
|
||
import Typography from '@mui/material/Typography';
|
||
import Box from '@mui/material/Box';
|
||
import { styled } from '@mui/material/styles';
|
||
import { Link } from 'react-router-dom';
|
||
interface ComponentProps {
|
||
building: {
|
||
img: string,
|
||
title: string,
|
||
description: string[]
|
||
},
|
||
cardNum: number;
|
||
idx: number;
|
||
}
|
||
|
||
|
||
const StyledTypography = styled(Typography)(({ theme }) => ({
|
||
color: theme.palette.text.secondary,
|
||
textAlign: 'justify',
|
||
marginBottom: '1em',
|
||
}));
|
||
|
||
|
||
function BuildCard({ building,cardNum,idx} : ComponentProps) {
|
||
return (
|
||
<Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} >
|
||
<CardMedia
|
||
component="img"
|
||
alt={ building.title }
|
||
image={ building.img }
|
||
/>
|
||
<Box>
|
||
<CardContent>
|
||
<Typography gutterBottom variant="h5" >
|
||
{ building.title }
|
||
</Typography>
|
||
{ building.description.map((item, ind) => (
|
||
<StyledTypography key={ind} variant="body2">
|
||
{ item }
|
||
</StyledTypography>
|
||
))}
|
||
</CardContent>
|
||
<CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
|
||
<Link key={cardNum} to={"/building/" + idx}><Button size="small">Подробнее</Button></Link>
|
||
</CardActions>
|
||
</Box>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
export default BuildCard; |