[WIP] Claims

frontend/dashboard/src/components/MuiDialog.tsx

@@ -0,0 +1,56 @@
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ReactElement } from 'react';
+import Iconify from './Iconify';
+
+// ----------------------------------------------------------------------
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  maxWidth?: string;
+};
+
+// ----------------------------------------------------------------------
+
+const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
+  const handleClose = () => {
+    setOpenDialog(false);
+  };
+
+  let maxWidthDialog = 'md';
+
+  if (maxWidth) {
+    maxWidthDialog = maxWidth;
+  }
+
+  return (
+    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={maxWidthDialog}>
+      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between">
+          {title?.icon ? (
+            <Stack direction="row">
+              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
+              <Typography variant="h6">{title?.name}</Typography>
+            </Stack>
+          ) : (
+            <Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
+          )}
+          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
+        {content ? content : 'Testing Content Dialog'}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MuiDialog;