55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
|
import {Button, Modal, Box, useTheme, Typography} 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);
|
|||
|
|
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>
|
|||
|
|
<Typography>Размеры картинок</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box></Box>
|
|||
|
|
<Box>
|
|||
|
|
<Typography>Размеры изображений в квизе</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box></Box>
|
|||
|
|
</Box>
|
|||
|
|
</Modal>
|
|||
|
|
</>
|
|||
|
|
|
|||
|
|
);
|
|||
|
|
}
|