Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 842x 842x 842x 5x 5x | import {Close} from '@mui/icons-material'
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography} from '@mui/material'
import {useState} from 'react'
export function Confirm({label, message, onConfirm}: {label: string; message: string; onConfirm: () => void}) {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => setMenuOpen(!menuOpen)
return (
<>
<Button fullWidth color="error" onClick={toggleMenu}>
{label}
</Button>
{menuOpen && (
<Dialog open={menuOpen} onClose={toggleMenu}>
<DialogTitle>Confirm</DialogTitle>
<IconButton
aria-label="close confirmation dialog"
onClick={toggleMenu}
sx={{
position: 'absolute',
right: 8,
top: 12,
}}
className="close-button"
>
<Close />
</IconButton>
<DialogContent>
<Typography>{message}</Typography>
</DialogContent>
<DialogActions sx={{justifyContent: 'space-between'}}>
<Button onClick={toggleMenu}>Cancel</Button>
<Button
variant="contained"
color="error"
onClick={() => {
onConfirm()
toggleMenu()
}}
>
{label}
</Button>
</DialogActions>
</Dialog>
)}
</>
)
}
|