56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import Card from '@mui/material/Card';
|
||
import CardContent from '@mui/material/CardContent';
|
||
import CardMedia from '@mui/material/CardMedia';
|
||
|
||
import Typography from '@mui/material/Typography';
|
||
import Box from '@mui/material/Box';
|
||
import { styled } from '@mui/material/styles';
|
||
import buildings from '../data.tsx';
|
||
import { useParams, Link } from 'react-router-dom';
|
||
|
||
|
||
const StyledTypography = styled(Typography)(({ theme }) => ({
|
||
color: theme.palette.text.secondary,
|
||
textAlign: 'justify',
|
||
marginBottom: '1em',
|
||
}));
|
||
|
||
|
||
function Building() {
|
||
const { id } = useParams();
|
||
const building = buildings[Number(id)];
|
||
return (
|
||
<>
|
||
|
||
<Card sx={{ display: 'flex', flexDirection: "column", alignItems: "center" }} >
|
||
<Box sx={{ display: 'flex', flexDirection: 'row', alignSelf: 'flex-start', gap: '0.5em', m: '1em' }}>
|
||
<Link to="/" style={{ textDecoration: 'none' }}><Typography sx={{color:"#659adf"}}>ГЛАВНАЯ</Typography></Link> > {building.title}
|
||
</Box>
|
||
<Typography gutterBottom variant="h5" >
|
||
{building.title}
|
||
</Typography>
|
||
<CardMedia
|
||
component="img"
|
||
alt={building.title}
|
||
image={building.img}
|
||
sx={{ width:"auto", maxHeight:"45vh", rounded: '8px' }}
|
||
/>
|
||
<Box>
|
||
<CardContent>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: {xs:0, sm:'2em'}}}>
|
||
{building.description.map((item, ind) => (
|
||
<StyledTypography key={ind} variant="body2" sx={{ flex: 1 }}>
|
||
{item}
|
||
</StyledTypography>
|
||
))}
|
||
</Box>
|
||
</CardContent>
|
||
|
||
</Box>
|
||
</Card>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Building; |