p5/8 done

labs/lab7/src/building/Building.tsx

@@ -0,0 +1,56 @@
+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>  &gt; {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;