moving files into requires structure
This commit is contained in:
53
labs/lab7/src/main/components/BuildCard.tsx
Normal file
53
labs/lab7/src/main/components/BuildCard.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
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';
|
||||
interface ComponentProps {
|
||||
building: {
|
||||
img: string,
|
||||
title: string,
|
||||
description: string[]
|
||||
},
|
||||
cardNum: number;
|
||||
}
|
||||
|
||||
|
||||
const StyledTypography = styled(Typography)(({ theme }) => ({
|
||||
color: theme.palette.text.secondary,
|
||||
textAlign: 'justify',
|
||||
marginBottom: '1em',
|
||||
}));
|
||||
|
||||
|
||||
function BuildCard({ building,cardNum} : 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"}} >
|
||||
<Button size="small">Подробнее</Button>
|
||||
</CardActions>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuildCard;
|
||||
Reference in New Issue
Block a user