RC-12: create basic popup component

src/app/main/shared-components/popups/BasicPopup.js

@@ -0,0 +1,44 @@
+import Backdrop from '@mui/material/Backdrop';
+import Box from '@mui/material/Box';
+import Fade from '@mui/material/Fade';
+import Modal from '@mui/material/Modal';
+import { memo } from 'react';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'inherit',
+  boxShadow: 24,
+  overflow: 'hidden',
+};
+
+function BasicPopup({ children, className, open, onClose }) {
+  return (
+    <div>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={onClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style} className={className}>
+            {children}
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}
+
+export default memo(BasicPopup);