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}]()
-
+
+
))}