36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { ComponentChildren, FunctionComponent } from 'preact';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogDescription,
|
|
AlertDialogLabel,
|
|
} from '@reach/alert-dialog';
|
|
import { useRef } from 'preact/hooks';
|
|
|
|
export const ConfirmationDialog: FunctionComponent<{
|
|
title: string | ComponentChildren;
|
|
}> = ({ title, children }) => {
|
|
const ldRef = useRef<HTMLButtonElement>(null);
|
|
|
|
return (
|
|
<AlertDialog leastDestructiveRef={ldRef}>
|
|
{/* sn-component is focusable by default, but doesn't stretch to child width
|
|
resulting in a badly focused dialog. Utility classes are not available
|
|
at the sn-component level, only below it. tabIndex -1 disables focus
|
|
and enables it on the child component */}
|
|
<div tabIndex={-1} className="sn-component">
|
|
<div
|
|
tabIndex={0}
|
|
className="max-w-89 bg-default rounded shadow-overlay focus:padded-ring-info px-9 py-9 flex flex-col items-center"
|
|
>
|
|
<AlertDialogLabel>{title}</AlertDialogLabel>
|
|
<div className="min-h-2" />
|
|
|
|
<AlertDialogDescription className="flex flex-col items-center">
|
|
{children}
|
|
</AlertDialogDescription>
|
|
</div>
|
|
</div>
|
|
</AlertDialog>
|
|
);
|
|
};
|