p5/8 done
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>lab6</title>
|
||||
<title>lab7</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
56
labs/lab7/src/building/Building.tsx
Normal file
56
labs/lab7/src/building/Building.tsx
Normal 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> > {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;
|
||||
@@ -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: <List />,
|
||||
},
|
||||
{
|
||||
path: "/building/:id",
|
||||
element: <Building />,
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
import List from "./list/List";
|
||||
import Main from "./main/Main";
|
||||
|
||||
import './styles/index.css'
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
|
||||
@@ -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 (
|
||||
<Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} >
|
||||
<CardMedia
|
||||
@@ -43,7 +45,7 @@ function BuildCard({ building,cardNum} : ComponentProps) {
|
||||
))}
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
|
||||
<Button size="small">Подробнее</Button>
|
||||
<Link key={cardNum} to={"/building/" + idx}><Button size="small">Подробнее</Button></Link>
|
||||
</CardActions>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
@@ -10,7 +10,7 @@ function Content() {
|
||||
<Grid container spacing={{ xs: 3, md: 6 }}>
|
||||
{cardData.map((item, index) => (
|
||||
<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>
|
||||
|
||||
@@ -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 (
|
||||
<Container maxWidth="lg">
|
||||
@@ -21,7 +23,8 @@ function Gallery() {
|
||||
},
|
||||
}}
|
||||
gap={8}>
|
||||
{imgData.map((item) => (
|
||||
{imgData.map((item, index) => (
|
||||
<Link key={index} to={"/building/" + index}>
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
srcSet={item.img}
|
||||
@@ -29,8 +32,9 @@ function Gallery() {
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImageListItemBar position="bottom" title={ item.title } />
|
||||
<ImageListItemBar position="bottom" title={item.title} />
|
||||
</ImageListItem>
|
||||
</Link>
|
||||
))}
|
||||
</ImageList>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user