57 lines
1.7 KiB
TypeScript
Executable File
57 lines
1.7 KiB
TypeScript
Executable File
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;
|