p5/8 done

labs/lab7/src/main/components/BuildCard.tsx

@@ -6,6 +6,7 @@ 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, 
@@ -13,6 +14,7 @@ interface ComponentProps {
         description: string[]
     },
     cardNum: number;
+    idx: number;
   }
 
 
@@ -23,7 +25,7 @@ interface ComponentProps {
   }));
 
 
-function BuildCard({ building,cardNum} : ComponentProps) {
+function BuildCard({ building,cardNum,idx} : ComponentProps) {
     return (
       <Card  style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{  display: 'flex' }} >
         <CardMedia
@@ -43,7 +45,7 @@ function BuildCard({ building,cardNum} : ComponentProps) {
             ))}
           </CardContent>
           <CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
-            <Button size="small">Подробнее</Button>
+            <Link key={cardNum} to={"/building/" + idx}><Button size="small">Подробнее</Button></Link>
           </CardActions>
         </Box>
       </Card>

labs/lab7/src/main/components/Content.tsx

@@ -10,7 +10,7 @@ function Content() {
       <Grid container spacing={{ xs: 3, md: 6 }}>
         {cardData.map((item, index) => (
           <Grid key={index} size={{ xs: 12, md: 6 }} >
-            <BuildCard building={ item } cardNum={index} />
+            <BuildCard building={ item } cardNum={index} idx={[3,6,9,7][index]} />
           </Grid>
         ))}
       </Grid>

labs/lab7/src/main/components/Gallery.tsx

@@ -4,8 +4,10 @@ import structures from "../../data";
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import ImageListItemBar from '@mui/material/ImageListItemBar';
+import { Link } from 'react-router-dom';
 const imgData = structures.slice(0, -1);
 
+
 function Gallery() {
   return (
     <Container maxWidth="lg">
@@ -21,7 +23,8 @@ function Gallery() {
             },
           }}
           gap={8}>
-          {imgData.map((item) => (
+          {imgData.map((item, index) => (
+            <Link key={index} to={"/building/" + index}>
             <ImageListItem key={item.img}>
               <img
                 srcSet={item.img}
@@ -29,8 +32,9 @@ function Gallery() {
                 alt={item.title}
                 loading="lazy"
               />
-              <ImageListItemBar position="bottom" title={ item.title } />
+              <ImageListItemBar position="bottom" title={item.title} />
             </ImageListItem>
+          </Link>
           ))}
         </ImageList>
       </Box>