1 files changed, 42 insertions, 0 deletions
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
new file mode 100644
index 0000000..312d01e
--- /dev/null
+++ b/client/src/components/Modal/Modal.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Modal, Typography, Box, Button } from '@mui/material'
+
+const PopUpModal = () => {
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1000,
+    bgcolor: 'background.paper',
+    borderRadius: '10px',
+    boxShadow: 24,
+    p: 4
+  }
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </>
+  )
+}
+
+export default PopUpModal