37 lines
907 B
JavaScript
37 lines
907 B
JavaScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
|
|
export function ActionDialog({ label = 'Aktionen', title = 'Aktionen', children }) {
|
|
const dialogRef = useRef(null);
|
|
|
|
function openDialog() {
|
|
dialogRef.current?.showModal();
|
|
}
|
|
|
|
function closeOnBackdrop(event) {
|
|
if (event.target === event.currentTarget) {
|
|
event.currentTarget.close();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button className="btn secondary" type="button" onClick={openDialog}>
|
|
{label}
|
|
</button>
|
|
<dialog className="action-dialog" ref={dialogRef} onClick={closeOnBackdrop}>
|
|
<div className="dialog-header">
|
|
<h3>{title}</h3>
|
|
<form method="dialog">
|
|
<button className="btn secondary" type="submit">
|
|
Schließen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div className="action-dialog-body">{children}</div>
|
|
</dialog>
|
|
</>
|
|
);
|
|
}
|