frontPanel/src/pages/startPage/ModalInfoWhyCantCreate.tsx

import { Box, Modal, Typography, Divider } from "@mui/material"

import { useUiTools } from "@root/uiTools/store";
import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import { useLayoutEffect } from "react";

export const ModalInfoWhyCantCreate = () => {

    const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
    
    return (
        <Modal
            open={openModalInfoWhyCantCreate}
            onClose={() => updateModalInfoWhyCantCreate(false)}
        >
            <Box sx={{
                position: 'absolute' as 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                maxWidth: '620px',
                width: '100%',
                bgcolor: 'background.paper',
                borderRadius: '12px',

                boxShadow: 24,
                p: "25px",
                minHeight: "60vh",
                maxHeight: "90vh",
                overflow: "auto"
            }}
            >
                {
                    Object.values(whyCantCreatePublic).map((data) => {
                        return (
                            <Box>
                                <Typography color="#7e2aea">У вопроса "{data.name}"</Typography>
                                {
                                    data.problems.map((problem) => <Typography p="5px 0">{problem}</Typography>)
                                }
                                <Divider/>
                            </Box>
                        )
                    })
                }
            </Box>
        </Modal>
    )
}