lab7 start (copied lab6)

labs/lab7/src/components/BuildCard.tsx

@@ -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;

labs/lab7/src/components/Content.tsx

@@ -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;

labs/lab7/src/components/CustomFooter.tsx

@@ -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;

labs/lab7/src/components/Gallery.tsx

@@ -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;

labs/lab7/src/components/Navbar.tsx

@@ -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;