frontPanel/src/pages/startPage/ModalSizeImage.tsx

import {
    Button,
    Modal,
    Box,
    useTheme,
    Typography,
    Table,
    TableCell,
    TableBody,
    TableContainer,
    TableRow,
} from "@mui/material";
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 (
        <>
            <Button
                sx={{
                    mt: "20px",
                    fontSize: "16px",
                    lineHeight: "19px",
                    color: theme.palette.orange.main,
                    textDecorationColor: theme.palette.orange.main
                }}
                onClick={handleOpen}>Размер картинок</Button>
            <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: "center",
                            backgroundColor: theme.palette.background.default,
                            padding: "20px",
                            borderRadius: "12px 12px 0px 0px"
                        }}>
                        <Typography>Размеры картинок</Typography>
                        <Button>x</Button>
                    </Box>
                    <Box sx={{padding: "15px 20px 30px"}}>
                        <Box><Typography>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography></Box>
                        <Box>
                            <TableContainer component={Box}>
                                <Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
                                    <TableBody>
                                        {rows2.map((row) => (
                                            <TableRow
                                                key={row.name}
                                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                            >
                                                <TableCell component="th" scope="row">
                                                    {row.name}
                                                </TableCell>
                                                <TableCell align="right">{row.size}</TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            </TableContainer>

                        </Box>
                    </Box>

                    <Box
                        sx={{
                            backgroundColor: theme.palette.background.default,
                            padding: "20px"
                        }}
                    >
                        <Typography>Размеры изображений в квизе</Typography>
                    </Box>
                    <TableContainer component={Box}>
                    <Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
                        <TableBody>
                            {rows.map((row) => (
                                <TableRow
                                    key={row.name}
                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                >
                                    <TableCell component="th" scope="row">
                                        {row.name}
                                    </TableCell>
                                    <TableCell align="right">{row.size}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </TableContainer>
                </Box>
            </Modal>
        </>

    );
}