53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { Box, Button, Modal, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
interface Props {
|
||
open: boolean;
|
||
cancelDelete: () => void;
|
||
deleteImage: () => void;
|
||
}
|
||
export default ({
|
||
open,
|
||
cancelDelete,
|
||
deleteImage,
|
||
}: Props) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(450));
|
||
|
||
|
||
return (
|
||
<Modal
|
||
open={open}
|
||
onClose={cancelDelete}
|
||
>
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
bgcolor: "background.paper",
|
||
boxShadow: 24,
|
||
borderRadius: "12px",
|
||
width: isMobile ? "200px" : "350px",
|
||
height: "350px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography sx={{
|
||
// height: isMobile ? "91px" : "70px",
|
||
backgroundColor: "#F2F3F7",
|
||
padding: isMobile ? "25px 20px 24px 20px" : "25px 43px 24px 20px",
|
||
borderRadius: "8px 8px 0px 0px",
|
||
color: "#9A9AAF",
|
||
fontSize: "18px",
|
||
lineHeight: "21.33px"
|
||
}}>
|
||
Вы уверены, что хотите удалить всю картинку и каждую настройку?
|
||
</Typography>
|
||
<Button sx={{margin: "25px"}} variant="contained" onClick={cancelDelete}>нет</Button>
|
||
<Button sx={{margin: "25px"}} variant="outlined" onClick={deleteImage}>да</Button>
|
||
|
||
</Box>
|
||
</Modal>
|
||
);
|
||
}; |