47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
import { Modal as MuiModal, Typography, Box, SxProps, Theme } from "@mui/material";
|
|
|
|
interface ModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
const style = {
|
|
position: "absolute" as const,
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 400,
|
|
bgcolor: "background.paper",
|
|
boxShadow: 24,
|
|
p: 4,
|
|
borderRadius: 2,
|
|
};
|
|
|
|
export const Modal = ({ open, onClose, children, title, sx }: ModalProps) => {
|
|
return (
|
|
<MuiModal
|
|
open={open}
|
|
onClose={onClose}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={{ ...style, ...sx }}>
|
|
{title && (
|
|
<Typography
|
|
id="modal-modal-title"
|
|
variant="h6"
|
|
component="h2"
|
|
gutterBottom
|
|
>
|
|
{title}
|
|
</Typography>
|
|
)}
|
|
<Box id="modal-modal-description">{children}</Box>
|
|
</Box>
|
|
</MuiModal>
|
|
);
|
|
};
|