47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import Button from '@mui/joy/Button';
|
||
|
|
import Divider from '@mui/joy/Divider';
|
||
|
|
import DialogTitle from '@mui/joy/DialogTitle';
|
||
|
|
import DialogContent from '@mui/joy/DialogContent';
|
||
|
|
import DialogActions from '@mui/joy/DialogActions';
|
||
|
|
import Modal from '@mui/joy/Modal';
|
||
|
|
import ModalDialog from '@mui/joy/ModalDialog';
|
||
|
|
import DeleteForever from '@mui/icons-material/DeleteForever';
|
||
|
|
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
|
||
|
|
|
||
|
|
export default function AlertDialogModal() {
|
||
|
|
const [open, setOpen] = React.useState<boolean>(false);
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Button
|
||
|
|
variant="outlined"
|
||
|
|
color="danger"
|
||
|
|
endDecorator={<DeleteForever />}
|
||
|
|
onClick={() => setOpen(true)}
|
||
|
|
>
|
||
|
|
Discard
|
||
|
|
</Button>
|
||
|
|
<Modal open={open} onClose={() => setOpen(false)}>
|
||
|
|
<ModalDialog variant="outlined" role="alertdialog">
|
||
|
|
<DialogTitle>
|
||
|
|
<WarningRoundedIcon />
|
||
|
|
Confirmation
|
||
|
|
</DialogTitle>
|
||
|
|
<Divider />
|
||
|
|
<DialogContent>
|
||
|
|
Are you sure you want to discard all of your notes?
|
||
|
|
</DialogContent>
|
||
|
|
<DialogActions>
|
||
|
|
<Button variant="solid" color="danger" onClick={() => setOpen(false)}>
|
||
|
|
Discard notes
|
||
|
|
</Button>
|
||
|
|
<Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
</DialogActions>
|
||
|
|
</ModalDialog>
|
||
|
|
</Modal>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|