OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

p5/8 done

Browse Source
This commit is contained in:
OkunElya
2026-04-14 23:08:44 +10:00
parent 5b921cbbbb
commit d7c5eedee5
6 changed files with 75 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
labs/lab7/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lab6</title> <title>lab7</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

56
labs/lab7/src/building/Building.tsx Normal file
View File

@@ -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 (
<>
<Card sx={{ display: 'flex', flexDirection: "column", alignItems: "center" }} >
<Box sx={{ display: 'flex', flexDirection: 'row', alignSelf: 'flex-start', gap: '0.5em', m: '1em' }}>
<Link to="/" style={{ textDecoration: 'none' }}><Typography sx={{color:"#659adf"}}>ГЛАВНАЯ</Typography></Link> &gt; {building.title}
</Box>
<Typography gutterBottom variant="h5" >
{building.title}
</Typography>
<CardMedia
component="img"
alt={building.title}
image={building.img}
sx={{ width:"auto", maxHeight:"45vh", rounded: '8px' }}
/>
<Box>
<CardContent>
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: {xs:0, sm:'2em'}}}>
{building.description.map((item, ind) => (
<StyledTypography key={ind} variant="body2" sx={{ flex: 1 }}>
{item}
</StyledTypography>
))}
</Box>
</CardContent>
</Box>
</Card>
</>
)
}
export default Building;

10
labs/lab7/src/main.tsx
View File

@@ -6,7 +6,9 @@ import {
RouterProvider, RouterProvider,
} from "react-router-dom"; } from "react-router-dom";
import List from "./list/List";
import Main from "./main/Main";
import Building from "./building/Building";
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
@@ -17,11 +19,13 @@ const router = createBrowserRouter([
path: "/list", path: "/list",
element: <List />, element: <List />,
}, },
{
path: "/building/:id",
element: <Building />,
},
]); ]);
import List from "./list/List";
import Main from "./main/Main";
import './styles/index.css' import './styles/index.css'
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(

6
labs/lab7/src/main/components/BuildCard.tsx
View File

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import { Link } from 'react-router-dom';
interface ComponentProps { interface ComponentProps {
building: { building: {
img: string, img: string,
@@ -13,6 +14,7 @@ interface ComponentProps {
description: string[] description: string[]
}, },
cardNum: number; cardNum: number;
idx: number;
} }
@@ -23,7 +25,7 @@ interface ComponentProps {
})); }));
function BuildCard({ building,cardNum} : ComponentProps) { function BuildCard({ building,cardNum,idx} : ComponentProps) {
return ( return (
<Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} > <Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} >
<CardMedia <CardMedia
@@ -43,7 +45,7 @@ function BuildCard({ building,cardNum} : ComponentProps) {
))} ))}
</CardContent> </CardContent>
<CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} > <CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
<Button size="small">Подробнее</Button> <Link key={cardNum} to={"/building/" + idx}><Button size="small">Подробнее</Button></Link>
</CardActions> </CardActions>
</Box> </Box>
</Card> </Card>

2
labs/lab7/src/main/components/Content.tsx
View File

@@ -10,7 +10,7 @@ function Content() {
<Grid container spacing={{ xs: 3, md: 6 }}> <Grid container spacing={{ xs: 3, md: 6 }}>
{cardData.map((item, index) => ( {cardData.map((item, index) => (
<Grid key={index} size={{ xs: 12, md: 6 }} > <Grid key={index} size={{ xs: 12, md: 6 }} >
<BuildCard building={ item } cardNum={index} /> <BuildCard building={ item } cardNum={index} idx={[3,6,9,7][index]} />
</Grid> </Grid>
))} ))}
</Grid> </Grid>

8
labs/lab7/src/main/components/Gallery.tsx
View File

@@ -4,8 +4,10 @@ import structures from "../../data";
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import ImageListItemBar from '@mui/material/ImageListItemBar'; import ImageListItemBar from '@mui/material/ImageListItemBar';
import { Link } from 'react-router-dom';
const imgData = structures.slice(0, -1); const imgData = structures.slice(0, -1);
function Gallery() { function Gallery() {
return ( return (
<Container maxWidth="lg"> <Container maxWidth="lg">
@@ -21,7 +23,8 @@ function Gallery() {
}, },
}} }}
gap={8}> gap={8}>
{imgData.map((item) => ( {imgData.map((item, index) => (
<Link key={index} to={"/building/" + index}>
<ImageListItem key={item.img}> <ImageListItem key={item.img}>
<img <img
srcSet={item.img} srcSet={item.img}
@@ -29,8 +32,9 @@ function Gallery() {
alt={item.title} alt={item.title}
loading="lazy" loading="lazy"
/> />
<ImageListItemBar position="bottom" title={ item.title } /> <ImageListItemBar position="bottom" title={item.title} />
</ImageListItem> </ImageListItem>
</Link>
))} ))}
</ImageList> </ImageList>
</Box> </Box>