34 lines
850 B
TypeScript
34 lines
850 B
TypeScript
import { ReactNode } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
export default function Drawer({
|
|
open,
|
|
title,
|
|
children,
|
|
onClose
|
|
}: {
|
|
open: boolean;
|
|
title: string;
|
|
children: ReactNode;
|
|
onClose: () => void;
|
|
}) {
|
|
if (!open) return null;
|
|
|
|
return createPortal(
|
|
<div className="modal d-block" style={{ background: "rgba(0,0,0,.35)" }} role="dialog">
|
|
<div className="modal-dialog modal-dialog-end">
|
|
<div className="modal-content h-100">
|
|
<div className="modal-header">
|
|
<h5 className="modal-title">{title}</h5>
|
|
<button className="btn-close" onClick={onClose} aria-label="close" />
|
|
</div>
|
|
<div className="modal-body p-0">
|
|
<div className="p-3">{children}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|