1 files changed, 49 insertions, 0 deletions
diff --git a/src/views/Modals/Inputs/SelectModal.jsx b/src/views/Modals/Inputs/SelectModal.jsx
new file mode 100644
index 0000000..61e7ae9
--- /dev/null
+++ b/src/views/Modals/Inputs/SelectModal.jsx
@@ -0,0 +1,49 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalDialog,
+  Option,
+  Select,
+  Typography,
+} from '@mui/joy'
+import React from 'react'
+
+function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) {
+  const [selected, setSelected] = React.useState(null)
+  const handleSave = () => {
+    onSave(options.find(item => item.id === selected))
+    onClose()
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose}>
+      <ModalDialog>
+        <Typography variant='h4'>{title}</Typography>
+        <Select>
+          {options.map((item, index) => (
+            <Option
+              value={item.id}
+              key={item[displayKey]}
+              onClick={() => {
+                setSelected(item.id)
+              }}
+            >
+              {item[displayKey]}
+            </Option>
+          ))}
+        </Select>
+
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+            Save
+          </Button>
+          <Button onClick={onClose} variant='outlined'>
+            Cancel
+          </Button>
+        </Box>
+      </ModalDialog>
+    </Modal>
+  )
+}
+export default SelectModal