23 lines
755 B
TypeScript
23 lines
755 B
TypeScript
import type { PropsWithChildren, ReactNode } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
|
||
interface Props extends PropsWithChildren {
|
||
title: ReactNode;
|
||
onClose(): void;
|
||
}
|
||
|
||
export function Dialog({ title, onClose, children }: Props) {
|
||
const dialog = (
|
||
<div className="dialog-backdrop" role="presentation" onMouseDown={onClose}>
|
||
<section className="dialog-window" role="dialog" aria-modal="true" onMouseDown={event => event.stopPropagation()}>
|
||
<header>
|
||
<h2>{title}</h2>
|
||
<button type="button" onClick={onClose} aria-label="Close window">×</button>
|
||
</header>
|
||
<div className="dialog-body">{children}</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
return createPortal(dialog, document.body);
|
||
}
|