added react router (p4/8) done for lab

labs/lab7/src/App.tsx

@@ -1,20 +1,11 @@
-import NavBar from './components/Navbar'
-import Gallery from "./components/Gallery";
-import Content from "./components/Content";
-import CustomFooter from "./components/CustomFooter";
-
-
-import './styles/App.css'
-
+import Main from "./main/Main";
+import List from "./list/List";
 function App() {
   return (
     <>
-      <NavBar  active='2'/>
-      <Gallery/>
-      <Content/>
-      <CustomFooter/>
+      {/* <Main/> */}
+      <List/>
     </>
-  )
+  );
 }
-
-export default App
+export default App;

labs/lab7/src/components/Navbar.tsx

@@ -11,6 +11,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuList from '@mui/material/MenuList';
+import { Link } from 'react-router-dom';
 
 import { useState } from 'react';
 
@@ -27,12 +28,12 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
 }));
 
 
-const StyledMenuItem =styled(MenuItem)(({}) => ({
+const StyledMenuItem = styled(MenuItem)(({ }) => ({
     '&.Mui-selected': {
         backgroundColor: '#1976d2',
         color: "white",
     },
-     '&.Mui-selected:hover': {
+    '&.Mui-selected:hover': {
         backgroundColor: '#11579c',
         color: "white",
     },
@@ -66,15 +67,20 @@ function NavBar({ active }: ComponentProps) {
                         Самые высокие здания и сооружения
                     </Typography>
                     <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                        <Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
-                            Главная
-                        </Button>
-                        <Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
-                            Список зданий
-                        </Button>
+                        <Link to="/">
+                            <Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
+                                Главная
+                            </Button>
+                        </Link>
+                        <Link to="/list">
+                            <Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
+                                Список зданий
+                            </Button>
+                        </Link>
                         <Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
                             Контакты
                         </Button>
+
                     </Box>
                     <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
                         <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -91,8 +97,12 @@ function NavBar({ active }: ComponentProps) {
                                 </IconButton>
                             </Box>
                             <MenuList>
-                                <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
-                                <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
+                                <Link to="/">
+                                    <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
+                                </Link>
+                                <Link to="/list">
+                                    <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
+                                </Link>
                                 <StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
                             </MenuList>
                         </Drawer>

labs/lab7/src/list/List.tsx

@@ -0,0 +1,12 @@
+import Navbar from "../components/Navbar";
+import BuildingsGrid from "./components/BuildingsGrid";
+
+function List() {
+  return (
+    <div>
+      <Navbar active="2"/>
+      <BuildingsGrid/>
+    </div>
+  );
+}
+export default List;

labs/lab7/src/list/components/BuildingsGrid.tsx

@@ -0,0 +1,28 @@
+import { DataGrid } from "@mui/x-data-grid";
+import type { GridRowsProp, GridColDef } from "@mui/x-data-grid";
+import Container from '@mui/material/Container';
+import { ruRU } from '@mui/x-data-grid/locales';
+
+import buildings from "../table";
+
+function BuildingsGrid() {
+  const rows: GridRowsProp = buildings;
+  const columns: GridColDef[] = [
+    { field: 'Название', headerName: 'Название', flex: 1},
+    { field: 'Тип', flex: 0.5},
+    { field: 'Страна', flex: 0.5},
+    { field: 'Город', flex: 0.5},
+    { field: 'Год' },
+    { field: 'Высота'},
+  ]
+  return (
+   <Container maxWidth="lg" sx={{height: '700px', mt: '20px'}}>
+     <DataGrid
+       localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
+       rows={rows}
+       columns={columns}
+    />
+   </Container>
+ )
+}
+export default BuildingsGrid;

labs/lab7/src/main.tsx

@@ -0,0 +1,31 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+
+
+
+const router = createBrowserRouter([
+  {
+    path: "",
+    element: <Main />,
+  },
+  {
+    path: "/list",
+    element: <List />,
+  },
+]);
+
+
+import  List  from "./list/List";
+import  Main  from "./main/Main";
+
+import './styles/index.css'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+)

labs/lab7/src/main/Main.tsx

@@ -0,0 +1,13 @@
+import Navbar from "../components/Navbar";
+import Gallery from "./components/Gallery";
+import Content from "./components/Content";
+function Main() {
+  return (
+     <div>
+       <Navbar active="1"/>
+       <Gallery/>
+       <Content/>
+     </div>
+   );
+}
+export default Main;

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

@@ -1,6 +1,6 @@
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
-import structures from "../data";
+import structures from "../../data";
 import BuildCard from "./BuildCard"
 const cardData = [structures[3], structures[6], structures[9], structures[7]]
 

labs/lab7/src/main/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './styles/index.css'
-import App from '../App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)