99 lines
2 KiB
TypeScript
99 lines
2 KiB
TypeScript
import { Box, Button, Modal, Typography } from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
setDeleteModal: Function;
|
|
handleDelete: (id: string | undefined) => void;
|
|
id?: string | undefined;
|
|
};
|
|
|
|
const style = {
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 330,
|
|
bgcolor: "background.paper",
|
|
borderRadius: 1.5,
|
|
boxShadow: 24,
|
|
p: 3,
|
|
};
|
|
|
|
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
|
|
|
|
export default function DeleteModal({
|
|
open,
|
|
setDeleteModal,
|
|
handleDelete,
|
|
id,
|
|
}: Props) {
|
|
// console.log("DeleteModal opened with ID:", id)
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<Typography
|
|
id="modal-modal-title"
|
|
variant="h6"
|
|
component="h2"
|
|
align="center"
|
|
sx={{ flexGrow: 1 }} // This ensures the title takes up available space
|
|
>
|
|
Delete Record
|
|
</Typography>
|
|
<Box
|
|
onClick={() => setDeleteModal(false)}
|
|
sx={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "flex-end", // Aligns the close icon to the right
|
|
marginTop: -3.5,
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</Box>
|
|
<Typography
|
|
id="modal-modal-description"
|
|
sx={{ mt: 2 }}
|
|
align="center"
|
|
>
|
|
Are you sure you want to delete this record?
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
mt: 4,
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
type="button"
|
|
sx={btnStyle}
|
|
onClick={() => setDeleteModal(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
type="button"
|
|
color="primary"
|
|
sx={btnStyle}
|
|
onClick={() => handleDelete(id || "")}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|