lab6 done
This commit is contained in:
@@ -9,7 +9,9 @@ Currently, two official plugins are available:
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
130
labs/lab6/package-lock.json
generated
130
labs/lab6/package-lock.json
generated
@@ -16,11 +16,15 @@
|
||||
"react-dom": "^19.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.29.0",
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@rolldown/plugin-babel": "^0.2.2",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"@types/node": "^24.12.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"babel-plugin-react-compiler": "^1.0.0",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
@@ -1257,6 +1261,37 @@
|
||||
"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": {
|
||||
"version": "1.0.0-rc.7",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
|
||||
@@ -1275,6 +1310,51 @@
|
||||
"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": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -1738,6 +1818,16 @@
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@@ -1746,9 +1836,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/baseline-browser-mapping": {
|
||||
"version": "2.10.17",
|
||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.17.tgz",
|
||||
"integrity": "sha512-HdrkN8eVG2CXxeifv/VdJ4A4RSra1DTW8dc/hdxzhGHN8QePs6gKaWM9pHPcpCoxYZJuOZ8drHmbdpLHjCYjLA==",
|
||||
"version": "2.10.18",
|
||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.18.tgz",
|
||||
"integrity": "sha512-VSnGQAOLtP5mib/DPyg2/t+Tlv65NTBz83BJBJvmLVHHuKJVaDOBvJJykiT5TR++em5nfAySPccDZDa4oSrn8A==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
@@ -1759,9 +1849,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
|
||||
"integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
|
||||
"version": "1.1.14",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
|
||||
"integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -1984,9 +2074,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.334",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.334.tgz",
|
||||
"integrity": "sha512-mgjZAz7Jyx1SRCwEpy9wefDS7GvNPazLthHg8eQMJ76wBdGQQDW33TCrUTvQ4wzpmOrv2zrFoD3oNufMdyMpog==",
|
||||
"version": "1.5.335",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.335.tgz",
|
||||
"integrity": "sha512-q9n5T4BR4Xwa2cwbrwcsDJtHD/enpQ5S1xF1IAtdqf5AAgqDFmR/aakqH3ChFdqd/QXJhS3rnnXFtexU7rax6Q==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@@ -1999,6 +2089,15 @@
|
||||
"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": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
@@ -2349,9 +2448,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/globals": {
|
||||
"version": "17.4.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
|
||||
"integrity": "sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==",
|
||||
"version": "17.5.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-17.5.0.tgz",
|
||||
"integrity": "sha512-qoV+HK2yFl/366t2/Cb3+xxPUo5BuMynomoDmiaZBIdbs+0pYbjfZU+twLhGKp4uCZ/+NbtpVepH5bGCxRyy2g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -3226,11 +3325,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
"integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
|
||||
"version": "1.22.12",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
|
||||
"integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"is-core-module": "^2.16.1",
|
||||
"path-parse": "^1.0.7",
|
||||
"supports-preserve-symlinks-flag": "^1.0.0"
|
||||
|
||||
@@ -18,11 +18,15 @@
|
||||
"react-dom": "^19.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.29.0",
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@rolldown/plugin-babel": "^0.2.2",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"@types/node": "^24.12.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"babel-plugin-react-compiler": "^1.0.0",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
import { useState } from 'react'
|
||||
import logo from './images/logo.svg'
|
||||
import NavBar from './components/Navbar.jsx'
|
||||
import NavBar from './components/Navbar'
|
||||
import Gallery from "./components/Gallery";
|
||||
import Content from "./components/Content";
|
||||
import CustomFooter from "./components/CustomFooter";
|
||||
|
||||
|
||||
import './styles/App.css'
|
||||
|
||||
function App() {
|
||||
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 react from '@vitejs/plugin-react'
|
||||
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
|
||||
import babel from '@rolldown/plugin-babel'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
plugins: [
|
||||
react(),
|
||||
babel({ presets: [reactCompilerPreset()] })
|
||||
],
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user