33 lines
836 B
TypeScript
33 lines
836 B
TypeScript
import { useEffect, useRef, type ReactNode } from 'react';
|
|
|
|
interface ModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Modal({ open, onClose, title, children }: ModalProps) {
|
|
const ref = useRef<HTMLDialogElement>(null);
|
|
|
|
useEffect(() => {
|
|
const dialog = ref.current;
|
|
if (!dialog) return;
|
|
if (open && !dialog.open) dialog.showModal();
|
|
if (!open && dialog.open) dialog.close();
|
|
}, [open]);
|
|
|
|
return (
|
|
<dialog
|
|
ref={ref}
|
|
onClose={onClose}
|
|
onCancel={onClose}
|
|
onClick={(e) => e.target === ref.current && onClose()}
|
|
aria-label={title}
|
|
className="m-auto w-full max-w-sm rounded-3xl border border-border bg-surface p-0 shadow-xl backdrop:bg-ink/40 backdrop:backdrop-blur-sm"
|
|
>
|
|
{children}
|
|
</dialog>
|
|
);
|
|
}
|