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((row) => (
                            <Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
                                <Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.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"}>{row.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((row) => (
                            <Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
                                <Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.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"}>{row.size}</Typography></Box>
                            </Box>
                        ))}
                    </Box>
                </Box>
            </Modal>
        </>

    );
}