lab6 done
This commit is contained in:
@@ -9,7 +9,9 @@ Currently, two official plugins are available:
|
|||||||
|
|
||||||
## React Compiler
|
## React Compiler
|
||||||
|
|
||||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
|
||||||
|
|
||||||
|
Note: This will impact Vite dev & build performances.
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
|||||||
130
labs/lab6/package-lock.json
generated
130
labs/lab6/package-lock.json
generated
@@ -16,11 +16,15 @@
|
|||||||
"react-dom": "^19.2.4"
|
"react-dom": "^19.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.29.0",
|
||||||
"@eslint/js": "^9.39.4",
|
"@eslint/js": "^9.39.4",
|
||||||
|
"@rolldown/plugin-babel": "^0.2.2",
|
||||||
|
"@types/babel__core": "^7.20.5",
|
||||||
"@types/node": "^24.12.2",
|
"@types/node": "^24.12.2",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"babel-plugin-react-compiler": "^1.0.0",
|
||||||
"eslint": "^9.39.4",
|
"eslint": "^9.39.4",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
"eslint-plugin-react-refresh": "^0.5.2",
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
@@ -1257,6 +1261,37 @@
|
|||||||
"node": "^20.19.0 || >=22.12.0"
|
"node": "^20.19.0 || >=22.12.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@rolldown/plugin-babel": {
|
||||||
|
"version": "0.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@rolldown/plugin-babel/-/plugin-babel-0.2.2.tgz",
|
||||||
|
"integrity": "sha512-q9pE8+47bQNHb5eWVcE6oXppA+JTSwvnrhH53m0ZuHuK5MLvwsLoWrWzBTFQqQ06BVxz1gp0HblLsch8o6pvZw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"picomatch": "^4.0.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.12.0 || ^24.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@babel/core": "^7.29.0 || ^8.0.0-rc.1",
|
||||||
|
"@babel/plugin-transform-runtime": "^7.29.0 || ^8.0.0-rc.1",
|
||||||
|
"@babel/runtime": "^7.27.0 || ^8.0.0-rc.1",
|
||||||
|
"rolldown": "^1.0.0-rc.5",
|
||||||
|
"vite": "^8.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@babel/plugin-transform-runtime": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@babel/runtime": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"vite": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rolldown/pluginutils": {
|
"node_modules/@rolldown/pluginutils": {
|
||||||
"version": "1.0.0-rc.7",
|
"version": "1.0.0-rc.7",
|
||||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
|
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
|
||||||
@@ -1275,6 +1310,51 @@
|
|||||||
"tslib": "^2.4.0"
|
"tslib": "^2.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/babel__core": {
|
||||||
|
"version": "7.20.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||||
|
"integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/parser": "^7.20.7",
|
||||||
|
"@babel/types": "^7.20.7",
|
||||||
|
"@types/babel__generator": "*",
|
||||||
|
"@types/babel__template": "*",
|
||||||
|
"@types/babel__traverse": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/babel__generator": {
|
||||||
|
"version": "7.27.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
|
||||||
|
"integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/types": "^7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/babel__template": {
|
||||||
|
"version": "7.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
|
||||||
|
"integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/parser": "^7.1.0",
|
||||||
|
"@babel/types": "^7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/babel__traverse": {
|
||||||
|
"version": "7.28.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
|
||||||
|
"integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/types": "^7.28.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/estree": {
|
"node_modules/@types/estree": {
|
||||||
"version": "1.0.8",
|
"version": "1.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||||
@@ -1738,6 +1818,16 @@
|
|||||||
"npm": ">=6"
|
"npm": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/babel-plugin-react-compiler": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/types": "^7.26.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/balanced-match": {
|
"node_modules/balanced-match": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||||
@@ -1746,9 +1836,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/baseline-browser-mapping": {
|
"node_modules/baseline-browser-mapping": {
|
||||||
"version": "2.10.17",
|
"version": "2.10.18",
|
||||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.17.tgz",
|
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.18.tgz",
|
||||||
"integrity": "sha512-HdrkN8eVG2CXxeifv/VdJ4A4RSra1DTW8dc/hdxzhGHN8QePs6gKaWM9pHPcpCoxYZJuOZ8drHmbdpLHjCYjLA==",
|
"integrity": "sha512-VSnGQAOLtP5mib/DPyg2/t+Tlv65NTBz83BJBJvmLVHHuKJVaDOBvJJykiT5TR++em5nfAySPccDZDa4oSrn8A==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
@@ -1759,9 +1849,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.13",
|
"version": "1.1.14",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
|
||||||
"integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
|
"integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -1984,9 +2074,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/electron-to-chromium": {
|
"node_modules/electron-to-chromium": {
|
||||||
"version": "1.5.334",
|
"version": "1.5.335",
|
||||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.334.tgz",
|
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.335.tgz",
|
||||||
"integrity": "sha512-mgjZAz7Jyx1SRCwEpy9wefDS7GvNPazLthHg8eQMJ76wBdGQQDW33TCrUTvQ4wzpmOrv2zrFoD3oNufMdyMpog==",
|
"integrity": "sha512-q9n5T4BR4Xwa2cwbrwcsDJtHD/enpQ5S1xF1IAtdqf5AAgqDFmR/aakqH3ChFdqd/QXJhS3rnnXFtexU7rax6Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
@@ -1999,6 +2089,15 @@
|
|||||||
"is-arrayish": "^0.2.1"
|
"is-arrayish": "^0.2.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/es-errors": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/escalade": {
|
"node_modules/escalade": {
|
||||||
"version": "3.2.0",
|
"version": "3.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||||
@@ -2349,9 +2448,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/globals": {
|
"node_modules/globals": {
|
||||||
"version": "17.4.0",
|
"version": "17.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/globals/-/globals-17.5.0.tgz",
|
||||||
"integrity": "sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==",
|
"integrity": "sha512-qoV+HK2yFl/366t2/Cb3+xxPUo5BuMynomoDmiaZBIdbs+0pYbjfZU+twLhGKp4uCZ/+NbtpVepH5bGCxRyy2g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -3226,11 +3325,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/resolve": {
|
"node_modules/resolve": {
|
||||||
"version": "1.22.11",
|
"version": "1.22.12",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
|
||||||
"integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
|
"integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
"is-core-module": "^2.16.1",
|
"is-core-module": "^2.16.1",
|
||||||
"path-parse": "^1.0.7",
|
"path-parse": "^1.0.7",
|
||||||
"supports-preserve-symlinks-flag": "^1.0.0"
|
"supports-preserve-symlinks-flag": "^1.0.0"
|
||||||
|
|||||||
@@ -18,11 +18,15 @@
|
|||||||
"react-dom": "^19.2.4"
|
"react-dom": "^19.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.29.0",
|
||||||
"@eslint/js": "^9.39.4",
|
"@eslint/js": "^9.39.4",
|
||||||
|
"@rolldown/plugin-babel": "^0.2.2",
|
||||||
|
"@types/babel__core": "^7.20.5",
|
||||||
"@types/node": "^24.12.2",
|
"@types/node": "^24.12.2",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"babel-plugin-react-compiler": "^1.0.0",
|
||||||
"eslint": "^9.39.4",
|
"eslint": "^9.39.4",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
"eslint-plugin-react-refresh": "^0.5.2",
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
|||||||
@@ -1,12 +1,18 @@
|
|||||||
import { useState } from 'react'
|
import NavBar from './components/Navbar'
|
||||||
import logo from './images/logo.svg'
|
import Gallery from "./components/Gallery";
|
||||||
import NavBar from './components/Navbar.jsx'
|
import Content from "./components/Content";
|
||||||
|
import CustomFooter from "./components/CustomFooter";
|
||||||
|
|
||||||
|
|
||||||
import './styles/App.css'
|
import './styles/App.css'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NavBar />
|
<NavBar active='2'/>
|
||||||
|
<Gallery/>
|
||||||
|
<Content/>
|
||||||
|
<CustomFooter/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
53
labs/lab6/src/components/BuildCard.tsx
Normal file
53
labs/lab6/src/components/BuildCard.tsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import CardActions from '@mui/material/CardActions';
|
||||||
|
import CardContent from '@mui/material/CardContent';
|
||||||
|
import CardMedia from '@mui/material/CardMedia';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
interface ComponentProps {
|
||||||
|
building: {
|
||||||
|
img: string,
|
||||||
|
title: string,
|
||||||
|
description: string[]
|
||||||
|
},
|
||||||
|
cardNum: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const StyledTypography = styled(Typography)(({ theme }) => ({
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
textAlign: 'justify',
|
||||||
|
marginBottom: '1em',
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
function BuildCard({ building,cardNum} : ComponentProps) {
|
||||||
|
return (
|
||||||
|
<Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} >
|
||||||
|
<CardMedia
|
||||||
|
component="img"
|
||||||
|
alt={ building.title }
|
||||||
|
image={ building.img }
|
||||||
|
/>
|
||||||
|
<Box>
|
||||||
|
<CardContent>
|
||||||
|
<Typography gutterBottom variant="h5" >
|
||||||
|
{ building.title }
|
||||||
|
</Typography>
|
||||||
|
{ building.description.map((item, ind) => (
|
||||||
|
<StyledTypography key={ind} variant="body2">
|
||||||
|
{ item }
|
||||||
|
</StyledTypography>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
<CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
|
||||||
|
<Button size="small">Подробнее</Button>
|
||||||
|
</CardActions>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BuildCard;
|
||||||
21
labs/lab6/src/components/Content.tsx
Normal file
21
labs/lab6/src/components/Content.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import structures from "../data";
|
||||||
|
import BuildCard from "./BuildCard"
|
||||||
|
const cardData = [structures[3], structures[6], structures[9], structures[7]]
|
||||||
|
|
||||||
|
function Content() {
|
||||||
|
return (
|
||||||
|
<Container maxWidth="xl">
|
||||||
|
<Grid container spacing={{ xs: 3, md: 6 }}>
|
||||||
|
{cardData.map((item, index) => (
|
||||||
|
<Grid key={index} size={{ xs: 12, md: 6 }} >
|
||||||
|
<BuildCard building={ item } cardNum={index} />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Content;
|
||||||
26
labs/lab6/src/components/CustomFooter.tsx
Normal file
26
labs/lab6/src/components/CustomFooter.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
|
||||||
|
const StyledContainer = styled(Container)(({ theme }) => ({
|
||||||
|
backgroundColor: theme.palette.action.hover,
|
||||||
|
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
||||||
|
marginTop: "50px",
|
||||||
|
padding: "20px",
|
||||||
|
color: theme.palette.text.secondary
|
||||||
|
}));
|
||||||
|
|
||||||
|
function CustomFooter() {
|
||||||
|
return (
|
||||||
|
<StyledContainer >
|
||||||
|
<Grid style={{ justifyContent: "space-around",}} container>
|
||||||
|
<Typography> OkunElya</Typography>
|
||||||
|
<Typography> 2026</Typography>
|
||||||
|
<Typography> FEFU</Typography>
|
||||||
|
</Grid>
|
||||||
|
</StyledContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CustomFooter;
|
||||||
41
labs/lab6/src/components/Gallery.tsx
Normal file
41
labs/lab6/src/components/Gallery.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import ImageList from '@mui/material/ImageList';
|
||||||
|
import ImageListItem from '@mui/material/ImageListItem';
|
||||||
|
import structures from "../data";
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
||||||
|
const imgData = structures.slice(0, -1);
|
||||||
|
|
||||||
|
function Gallery() {
|
||||||
|
return (
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<Box sx={{ width: 800, height: 585, overflowY: 'scroll', m: '20px auto' }}>
|
||||||
|
<ImageList
|
||||||
|
variant="masonry"
|
||||||
|
sx={{
|
||||||
|
columnCount: {
|
||||||
|
xs: '1 !important',
|
||||||
|
sm: '2 !important',
|
||||||
|
md: '3 !important',
|
||||||
|
lg: '4 !important',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
gap={8}>
|
||||||
|
{imgData.map((item) => (
|
||||||
|
<ImageListItem key={item.img}>
|
||||||
|
<img
|
||||||
|
srcSet={item.img}
|
||||||
|
src={item.img}
|
||||||
|
alt={item.title}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
<ImageListItemBar position="bottom" title={ item.title } />
|
||||||
|
</ImageListItem>
|
||||||
|
))}
|
||||||
|
</ImageList>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Gallery;
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import AppBar from '@mui/material/AppBar';
|
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import Container from '@mui/material/Container';
|
|
||||||
|
|
||||||
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
flexShrink: 0,
|
|
||||||
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
|
||||||
border: '1px solid',
|
|
||||||
borderColor: theme.palette.divider,
|
|
||||||
padding: '8px 12px',
|
|
||||||
}));
|
|
||||||
|
|
||||||
function NavBar() {
|
|
||||||
return (
|
|
||||||
<AppBar
|
|
||||||
position="static"
|
|
||||||
sx={{
|
|
||||||
boxShadow: 0,
|
|
||||||
bgcolor: 'transparent',
|
|
||||||
mt: '28px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Container maxWidth="xl">
|
|
||||||
<StyledToolbar>
|
|
||||||
|
|
||||||
</StyledToolbar>
|
|
||||||
</Container>
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default NavBar;
|
|
||||||
105
labs/lab6/src/components/Navbar.tsx
Normal file
105
labs/lab6/src/components/Navbar.tsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import AppBar from '@mui/material/AppBar';
|
||||||
|
import Toolbar from '@mui/material/Toolbar';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||||||
|
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 { useState } from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
flexShrink: 0,
|
||||||
|
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: theme.palette.divider,
|
||||||
|
padding: '8px 12px',
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
const StyledMenuItem =styled(MenuItem)(({}) => ({
|
||||||
|
'&.Mui-selected': {
|
||||||
|
backgroundColor: '#1976d2',
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
'&.Mui-selected:hover': {
|
||||||
|
backgroundColor: '#11579c',
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(69, 146, 223, 0.45)',
|
||||||
|
},
|
||||||
|
|
||||||
|
}));
|
||||||
|
interface ComponentProps {
|
||||||
|
active: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavBar({ active }: ComponentProps) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const toggleDrawer = (newOpen: boolean) => () => {
|
||||||
|
setOpen(newOpen);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<AppBar
|
||||||
|
position="static"
|
||||||
|
sx={{
|
||||||
|
boxShadow: 0,
|
||||||
|
bgcolor: 'transparent',
|
||||||
|
mt: '28px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Container maxWidth="xl">
|
||||||
|
<StyledToolbar>
|
||||||
|
<Typography variant="h6" sx={{ color: '#5d8aa8' }}>
|
||||||
|
Самые высокие здания и сооружения
|
||||||
|
</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>
|
||||||
|
<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)}>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Drawer
|
||||||
|
anchor="top"
|
||||||
|
open={open}
|
||||||
|
onClose={toggleDrawer(false)}
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<IconButton onClick={toggleDrawer(false)}>
|
||||||
|
<CloseRoundedIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
<MenuList>
|
||||||
|
<StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
|
||||||
|
<StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
|
||||||
|
<StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
|
||||||
|
</MenuList>
|
||||||
|
</Drawer>
|
||||||
|
</Box>
|
||||||
|
</StyledToolbar>
|
||||||
|
</Container>
|
||||||
|
</AppBar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default NavBar;
|
||||||
118
labs/lab6/src/data.tsx
Normal file
118
labs/lab6/src/data.tsx
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
import Image1 from './images/image1.jpg';
|
||||||
|
import Image2 from './images/image2.jpg';
|
||||||
|
import Image3 from './images/image3.jpg';
|
||||||
|
import Image4 from './images/image4.jpg';
|
||||||
|
import Image5 from './images/image5.jpg';
|
||||||
|
import Image6 from './images/image6.jpg';
|
||||||
|
import Image7 from './images/image7.jpg';
|
||||||
|
import Image8 from './images/image8.jpg';
|
||||||
|
import Image9 from './images/image9.jpg';
|
||||||
|
import Image10 from './images/image10.jpg';
|
||||||
|
|
||||||
|
const structures = [
|
||||||
|
{
|
||||||
|
img: Image1,
|
||||||
|
title: "Раффлз-Сити, Китай",
|
||||||
|
description: [
|
||||||
|
`Раффлз-Сити — комплекс небоскрёбов, расположенный в китайском городе Чунцин, в деловом районе Юйчжун. Построен в 2019 году. Архитекторами комплекса выступили Моше Сафди и Чунцинский архитектурный институт, владельцем является сингапурская группа CapitaLand.`,
|
||||||
|
`В состав многофункционального комплекса Раффлз-Сити входят восемь высотных башен и обширный подиум, в котором располагаются продуктовый супермаркет, магазины, автосалоны, рестораны, выставочные залы и паркинг. Общая площадь комплекса — свыше 1,1 млн м²,
|
||||||
|
в том числе пятиэтажный торговый центр — 230 тыс. м², офисы — 160 тыс. м² и мультиплекс сети CGV — 5,6 тыс. м². В одной из 350-метровых башен Раффлз-Сити расположен пятизвёздочный отель InterContinental,
|
||||||
|
также в комплексе насчитывается 1,4 тыс. жилых апартаментов сети Ascott и 26,4 тыс. парковочных мест.`
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image2,
|
||||||
|
title: "Авичи-Арена, Швеция",
|
||||||
|
description: [
|
||||||
|
`Авичи-Арена - 85-метровая многоцелевая арена в Стокгольме. Второе по величине сферическое сооружение в мире. Место проведения концертов и спортивных мероприятий.
|
||||||
|
Арена находится в микрорайоне Глобен-Сити, созданном специально для неё. Имеет вместимость 16 000 человек во время концертов и 13 850 во время хоккейных матчей.`,
|
||||||
|
`Арена была построена специально к чемпионату мира по хоккею 1989 года и открыта 19 февраля 1989 года. Олицетворяет собой Солнце в Шведской Солнечной системе, крупнейшей в мире модели Солнечной системы.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image3,
|
||||||
|
title: "Труба ГРЭС-2, Казахстан",
|
||||||
|
description: [
|
||||||
|
`Железобетонная дымовая труба, построенная в 1987 году, имея высоту 420 м, является самой высокой в мире и занесена в Книгу рекордов Гиннесса.
|
||||||
|
Суммарная масса трубы составляет 60 тысяч тонн, её диаметр у основания составляет 44 м, диаметр устья — 14,2 м.`,
|
||||||
|
`ГРЭС-2 вырабатывает электроэнергию из высокозольного экибастузского угля двумя энергоблоками по 500 МВт, имеет установленную мощность 1000 МВт. Два её энергоблока вырабатывают около 12 % всей электроэнергии,
|
||||||
|
производимой в республике. Энергия ГРЭС-2 предназначена для обеспечения севера Казахстана. Потребителями являются десятки предприятий не только Казахстана, но и России.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image4,
|
||||||
|
title: 'Бурдж-Халифа, Дубай, ОАЭ',
|
||||||
|
description: [
|
||||||
|
`Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.`,
|
||||||
|
`Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве работало до 12 000 рабочих.
|
||||||
|
На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры.
|
||||||
|
Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических конструкций.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image5,
|
||||||
|
title: "Интинская радиомачта, Инта, Россия",
|
||||||
|
description: [
|
||||||
|
`На подъезде к железнодорожной станции Инта 1, кроме величественных вершин Урала, бросается в глаза металлическая вышка-мачта высотой 462,8 метра.
|
||||||
|
Она больше чем знаменитая Эйфелева башня, но меньше на 77 метров, чем телевизионная Останкинская в Москве. Антенна навигационной системы «Чайка» предназначена
|
||||||
|
для определения координат самолётов и кораблей с погрешностью 50–100 метров. Вышка-мачта находится на территории действующей военной части.`,
|
||||||
|
`По конструкции это классическая GP антенна. Длинна волны передачи - приёма кратна высоте. Планировалось, чтотакие антенны должны были быть построены в нескольких
|
||||||
|
точках по Полярному кругу.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image6,
|
||||||
|
title: "Ворота Запада, США",
|
||||||
|
description: [
|
||||||
|
`Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
|
||||||
|
`Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра.
|
||||||
|
Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image7,
|
||||||
|
title: 'CN Tower, Торонто, Канада',
|
||||||
|
description: [
|
||||||
|
`553.3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по 2007 год, до сих пор остаётся
|
||||||
|
таковым в Западном полушарии. Является символом Торонто. На высоте 447 м находится астрономическая обсерватория.`,
|
||||||
|
`Земляные работы для сооружения железобетонной конструкции с последующим натяжением арматуры весом 130 000т начались 12 февраля 1973 г.,
|
||||||
|
а уже 2 апреля 1975 г. возведение башни было завершено.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image8,
|
||||||
|
title: 'Небесное дерево, Токио, Япония',
|
||||||
|
description: [
|
||||||
|
`Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
|
||||||
|
Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» — названию исторической области,
|
||||||
|
где находится современный Токио.`,
|
||||||
|
`Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
|
||||||
|
Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться панорамными видами реки и города.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image9,
|
||||||
|
title: 'The Clock Towers, Мекка, Саудовская Аравия',
|
||||||
|
description: [
|
||||||
|
`Отель «Королевская часовая башня» имеет высоту 601 м. Его строительство которого завершилось в 2012 году. Внешне здание отдалённо напоминает Биг-Бен в Лондоне,
|
||||||
|
при этом выше последнего в 6 раз.`,
|
||||||
|
`На Королевской башне установлены часы диаметром 43 метра (длина часовой стрелки составляет 17 метров, минутной — 22),
|
||||||
|
расположенные на высоте более 400 метров над землёй. Четыре их циферблата установлены по четырём сторонам света. Часы видны из любого места города,
|
||||||
|
и являются самыми большими и самыми высотными часами в мире`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: Image10,
|
||||||
|
title: 'Merdeka 118, Куала-Лумпур, Малайзия',
|
||||||
|
description: [
|
||||||
|
`Общая высота здания составляет 678.9 м, причём более 160 м приходится на шпиль. Строительство Merdeka 118 началось в 2014 году.`,
|
||||||
|
`Название «Merdeka» означает «независимость», оно отсылает к наименованию расположенного рядом с башней стадиона,
|
||||||
|
который известен как место официального провозглашения независимости.`,
|
||||||
|
`Здание находится в центре Куала-Лумпура. В небоскрёбе откроется первый отель Park Hyatt в Малайзии.
|
||||||
|
Также в здании будут расположены самая высокая смотровая площадка в Юго-Восточной Азии, торговый центр, музей, мечеть, офисы и квартиры.`
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
export default structures;
|
||||||
@@ -1,7 +1,11 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import react from '@vitejs/plugin-react'
|
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
|
||||||
|
import babel from '@rolldown/plugin-babel'
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [
|
||||||
|
react(),
|
||||||
|
babel({ presets: [reactCompilerPreset()] })
|
||||||
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user