From d7c5eedee575d94cb50eb6ed44abfbf2977b7ea5 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Tue, 14 Apr 2026 23:08:44 +1000 Subject: [PATCH] p5/8 done --- labs/lab7/index.html | 2 +- labs/lab7/src/building/Building.tsx | 56 +++++++++++++++++++++ labs/lab7/src/main.tsx | 10 ++-- labs/lab7/src/main/components/BuildCard.tsx | 6 ++- labs/lab7/src/main/components/Content.tsx | 2 +- labs/lab7/src/main/components/Gallery.tsx | 8 ++- 6 files changed, 75 insertions(+), 9 deletions(-) create mode 100644 labs/lab7/src/building/Building.tsx diff --git a/labs/lab7/index.html b/labs/lab7/index.html index 35f0484..ede9c94 100644 --- a/labs/lab7/index.html +++ b/labs/lab7/index.html @@ -4,7 +4,7 @@ - lab6 + lab7
diff --git a/labs/lab7/src/building/Building.tsx b/labs/lab7/src/building/Building.tsx new file mode 100644 index 0000000..48b68b0 --- /dev/null +++ b/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 ( + <> + + + + ГЛАВНАЯ > {building.title} + + + {building.title} + + + + + + + {building.description.map((item, ind) => ( + + {item} + + ))} + + + + + + + ) +} + +export default Building; \ No newline at end of file diff --git a/labs/lab7/src/main.tsx b/labs/lab7/src/main.tsx index 9ee7d86..e04ccc9 100644 --- a/labs/lab7/src/main.tsx +++ b/labs/lab7/src/main.tsx @@ -6,7 +6,9 @@ import { RouterProvider, } from "react-router-dom"; - +import List from "./list/List"; +import Main from "./main/Main"; +import Building from "./building/Building"; const router = createBrowserRouter([ { @@ -17,11 +19,13 @@ const router = createBrowserRouter([ path: "/list", element: , }, + { + path: "/building/:id", + element: , + }, ]); -import List from "./list/List"; -import Main from "./main/Main"; import './styles/index.css' createRoot(document.getElementById('root')!).render( diff --git a/labs/lab7/src/main/components/BuildCard.tsx b/labs/lab7/src/main/components/BuildCard.tsx index 61c1afa..5aae94a 100644 --- a/labs/lab7/src/main/components/BuildCard.tsx +++ b/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 ( - + diff --git a/labs/lab7/src/main/components/Content.tsx b/labs/lab7/src/main/components/Content.tsx index 0d71b84..225d336 100644 --- a/labs/lab7/src/main/components/Content.tsx +++ b/labs/lab7/src/main/components/Content.tsx @@ -10,7 +10,7 @@ function Content() { {cardData.map((item, index) => ( - + ))} diff --git a/labs/lab7/src/main/components/Gallery.tsx b/labs/lab7/src/main/components/Gallery.tsx index 5469de6..c6c4e3d 100644 --- a/labs/lab7/src/main/components/Gallery.tsx +++ b/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 ( @@ -21,7 +23,8 @@ function Gallery() { }, }} gap={8}> - {imgData.map((item) => ( + {imgData.map((item, index) => ( + {item.title} - + + ))}