feat: generic modal

src/components/atoms/GenericModal.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { Modal, IconButton, Box } from '@mui/material';
+import { Clear } from "@mui/icons-material";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children?: JSX.Element;
+  modalStyle?: React.CSSProperties;
+  canBeClosed?: boolean;
+}
+
+export const GenericModal: FC<ModalProps> = (
+  { isOpen, onClose, children, modalStyle , canBeClosed= true}) => {
+
+  return (
+        <Modal open={isOpen} onClose={canBeClosed ? onClose : ()=>{}} >
+          <Box sx={modalStyle ?  {...modalStyle,   boxShadow: 24, position: 'absolute',} : defaultModalStyle}>
+            {canBeClosed ?
+              <IconButton onClick={onClose} sx={{ float: "right" }}>
+                <Clear sx={{ fontSize: 20 }}/>
+              </IconButton>
+              : null
+            }
+            {children}
+          </Box>
+        </Modal>
+    );
+};
+
+ const defaultModalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 500,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+  height:'60%',
+  display:'block',
+  overflow:'scroll',
+  padding: '5px 25px 10px 25px',
+};