ignore folder

components/ui/Dialog.tsx

@@ -0,0 +1,60 @@
+import { ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+type DialogProps = {
+  open: boolean;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  onClose: () => void;
+  footer?: ReactNode;
+  size?: "sm" | "lg" | "xl";
+  loading?: boolean;
+};
+
+const sizeClass = {
+  sm: "modal-dialog modal-sm",
+  lg: "modal-dialog modal-lg",
+  xl: "modal-dialog modal-xl"
+};
+
+export default function Dialog({
+  open,
+  title,
+  description,
+  children,
+  onClose,
+  footer,
+  size = "sm",
+  loading
+}: DialogProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onEsc = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onEsc);
+    return () => window.removeEventListener("keydown", onEsc);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="modal d-block" style={{ background: "rgba(0,0,0,.4)" }}>
+      <div className={sizeClass[size]} style={{ marginTop: "6rem" }}>
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">{title}</h5>
+            <button className="btn-close" onClick={onClose} aria-label="close" />
+          </div>
+          <div className="modal-body">
+            {description && <p className="text-muted mb-3">{description}</p>}
+            {loading ? <div className="text-center text-muted">Loading...</div> : children}
+          </div>
+          {footer && <div className="modal-footer">{footer}</div>}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}