56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
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();
|
||
|
||
useLayoutEffect(() => {
|
||
if (Object.values(whyCantCreatePublic).length === 0) {
|
||
updateModalInfoWhyCantCreate(false);
|
||
}
|
||
}, [openModalInfoWhyCantCreate]);
|
||
|
||
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 === "quiz" ? "У квиза" : `У вопроса "${data.name}"`}
|
||
</Typography>
|
||
{data.problems.map((problem) => (
|
||
<Typography p="5px 0">{problem}</Typography>
|
||
))}
|
||
<Divider />
|
||
</Box>
|
||
);
|
||
})}
|
||
</Box>
|
||
</Modal>
|
||
);
|
||
};
|