frontPanel/src/pages/startPage/ModalSizeImage.tsx

import {
  Button,
  Modal,
  Box,
  useTheme,
  Typography,
  Table,
  TableCell,
  TableBody,
  TableContainer,
  TableRow,
  IconButton,
  Link,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import * as React from "react";
import { useState } from "react";

export default function ModalSizeImage() {
  const theme = useTheme();
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  function createData(name: string, size: string) {
    return { name, size };
  }

  const rows = [
    createData("Прямая ссылка/домен", "1792х1509 px"),
    createData("Модальное окно на сайте", "1380х1300 px"),
    createData("Во ВКонтакте", "1166х1200 px"),
    createData("Версия для планшета", "767х220 px"),
    createData("Мобильная версия", "400х220 px"),
    createData("Картинка для дизайна Centered", "900х490 px"),
    createData("Картинка для дизайна Expanded", "1920х1080 px"),
  ];

  const rows2 = [
    createData("Вертикальный вариант", "180х240 px"),
    createData("Квадратные", "240х240 px"),
    createData("Варианты и картинка", "380х307 px"),
    createData("Консультант", "140х140 px"),
    createData("Логотип", "107х37 px"),
    createData("", "1100х600 px"),
    createData("Бонус", "200х60 px"),
    createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
  ];

  return (
    <>
      <Link
        component="button"
        sx={{
          mt: "20px",
          fontSize: "16px",
          lineHeight: "19px",
          textAlign: "left",
          color: theme.palette.orange.main,
          textDecorationColor: theme.palette.orange.main,
        }}
        onClick={handleOpen}
      >
        Размер картинок
      </Link>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "540px",
            width: "100%",
            minHeight: "632px",
            bgcolor: "background.paper",
            borderRadius: "12px",
            boxShadow: 24,
            p: 0,
          }}
        >
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              backgroundColor: theme.palette.background.default,
              padding: "10px 9px 17px 20px",
              borderRadius: "12px 12px 0px 0px",
            }}
          >
            <Typography variant={"h5"}>Размеры картинок</Typography>
            <IconButton onClick={handleClose}>
              <CloseIcon />
            </IconButton>
          </Box>
          <Box sx={{ padding: "15px 20px 0px" }}>
            <Typography
              variant={"body2"}
              sx={{ color: theme.palette.grey2.main, fontWeight: 400 }}
            >
              Рекомендованный размер зависит от того, как вы будете чаще
              использовать квиз:
            </Typography>
          </Box>
          <Box sx={{ padding: "15px 40px 30px" }}>
            {rows.map(({ name, size }, index) => (
              <Box
                key={name || index}
                sx={{
                  display: "flex",
                  justifyContent: "space-between",
                  width: "100%",
                  paddingBottom: "5px",
                }}
              >
                <Box sx={{ display: "block ruby", height: "20px" }}>
                  <Typography variant={"body2"} fontWeight={400}>
                    {name}
                  </Typography>
                </Box>
                <Box
                  sx={{
                    borderBottom: "solid 1px #F2F3F7",
                    width: "100%",
                    margin: "0 7px",
                  }}
                ></Box>
                <Box sx={{ display: "block ruby", height: "20px" }}>
                  <Typography variant={"body2"}>{size}</Typography>
                </Box>
              </Box>
            ))}
          </Box>

          <Box
            sx={{
              backgroundColor: theme.palette.background.default,
              padding: "20px",
            }}
          >
            <Typography variant={"h5"}>Размеры изображений в квизе</Typography>
          </Box>
          <Box sx={{ padding: "15px 40px 20px" }}>
            {rows2.map(({ name, size }, index) => (
              <Box
                key={name || index}
                sx={{
                  display: "flex",
                  justifyContent: "space-between",
                  width: "100%",
                  paddingBottom: "5px",
                }}
              >
                <Box sx={{ display: "block ruby", height: "20px" }}>
                  <Typography variant={"body2"} fontWeight={400}>
                    {name}
                  </Typography>
                </Box>
                <Box
                  sx={{
                    borderBottom: "solid 1px #F2F3F7",
                    width: "100%",
                    margin: "0 7px",
                  }}
                ></Box>
                <Box sx={{ display: "block ruby", height: "20px" }}>
                  <Typography variant={"body2"}>{size}</Typography>
                </Box>
              </Box>
            ))}
          </Box>
        </Box>
      </Modal>
    </>
  );
}