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";
import { wrap } from "module";

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("Стартовая \"Standard\" (десктоп)", "60% х 100%"),
    createData("Стартовая \"Standard\" (мобилка)", "100% х 128 px"),
    createData("Стартовая \"Centered\" (десктоп)", "844х306 px"),
    createData("Стартовая \"Centered\" (планшет гориз.)", "844х530 px"),
    createData("Стартовая \"Centered\" (планшет верт.)", "660х260 px"),
    createData("Стартовая \"Centered\" (мобилка)", "100% х 128 px"),
    createData("Логотип", "110 х 40 px"),
    createData("\"Варианты с картинками\" (десктоп)", "317х257 px"),
    createData("\"Варианты с картинками\" (планшет)", "455х257 px"),
    createData("\"Варианты с картинками\" (мобилка)", "160х183 px"),
    createData("\"Варианты и картинка\" (десктоп)", "450х450 px"),
    createData("\"Варианты и картинка\" (мобилка)", "335х335 px"),
    createData("\"Своё поле для ввода\" (десктоп)", "450х450 px"),
    createData("\"Своё поле для ввода\" (мобилка)", "335х335 px"),
    createData("\"Варианты\" (десктоп)", "450х450 px"),
    createData("\"Варианты\" (мобилка)", "335х335 px"),
    createData("Картинка для результата (десктоп)", "700х306 px"),
    createData("Картинка для результата (мобилка)", "335х236 px"),
  ];
  // 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
          overflow="auto"
          height="auto"
            maxHeight="650px"
          >

            <Box sx={{ padding: "15px 20px 0px" }}>
              <Typography
                variant={"body2"}
                sx={{ color: theme.palette.grey2.main, fontWeight: 400 }}
              >
                Рекомендованный размер зависит от того, как вы будете чаще
                использовать quiz:
              </Typography>
            </Box>
            <Box sx={{ padding: "15px 40px 30px" }}>
              {rows.map(({ name, size }, index) => (
                <Box
                  key={name || index}
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    gap: "6px",
                    position: "relative",
                    width: "100%",
                    paddingBottom: "5px",
                    flexWrap: "wrap"
                  }}
                >
                  <Box
                    sx={{
                      position: "absolute",
                      top: 18,
                      left: 0,
                      right: 0,
                      borderBottom: "solid 1px #F2F3F7",
                    }}
                  />
                  <Box
                    sx={{
                      display: "block ruby",
                      position: "relative",
                      zIndex: 1,
                      background: "white",
                    }}
                  >
                    <Typography variant={"body2"} fontWeight={400}>
                      {name}
                    </Typography>
                  </Box>
                  <Box
                    sx={{
                      display: "block ruby",
                      position: "relative",
                      zIndex: 1,
                      background: "white",
                    }}
                  >
                    <Typography sx={{ whiteSpace: "nowrap" }} variant={"body2"}>
                      {size}
                    </Typography>
                  </Box>
                </Box>
              ))}
            </Box>
            {/* <Box
            sx={{
              backgroundColor: theme.palette.background.default,
              padding: "20px",
            }}
          >
            <Typography variant={"h5"}>Размеры изображений в quiz</Typography>
          </Box>
          <Box sx={{ padding: "15px 40px 20px" }}>
            {rows2.map(({ name, size }, index) => (
              <Box
                key={name || index}
                sx={{
                  display: "flex",
                  justifyContent: "space-between",
                  position: "relative",
                  gap: "6px",
                  width: "100%",
                  paddingBottom: "5px",
                }}
              >
                <Box
                  sx={{
                    position: "absolute",
                    top: 18,
                    left: 0,
                    right: 0,
                    borderBottom: "solid 1px #F2F3F7",
                  }}
                />
                <Box
                  sx={{
                    display: "block ruby",
                    position: "relative",
                    zIndex: 1,
                    background: "white",
                  }}
                >
                  <Typography variant={"body2"} fontWeight={400}>
                    {name}
                  </Typography>
                </Box>
                <Box
                  sx={{
                    display: "block ruby",
                    position: "relative",
                    zIndex: 1,
                    background: "white",
                  }}
                >
                  <Typography sx={{ whiteSpace: "nowrap" }} variant={"body2"}>
                    {size}
                  </Typography>
                </Box>
              </Box>
            ))}
          </Box> */}
          </Box>

        </Box>
      </Modal>
    </>
  );
}