minusculas

components/modal.js

@@ -0,0 +1,33 @@
+// components/Modal.js
+import { Tag, Watch } from "sigpro";
+
+export const Modal = (props) => {
+  let dialogRef = null;
+
+  Watch(() => {
+    const isOpen = typeof props.open === "function" ? props.open() : props.open;
+    if (!dialogRef) return;
+    isOpen ? dialogRef.showModal() : dialogRef.close();
+  });
+
+  const close = () => typeof props.open === "function" && props.open(false);
+
+  return Tag("dialog", {
+    ...props,
+    ref: el => dialogRef = el,
+    class: `modal ${props.class ?? ''}`,
+    onclose: close,
+    oncancel: close
+  }, [
+    Tag("div", { class: "modal-box" }, [
+      props.title && Tag("h3", { class: "text-lg font-bold" }, props.title),
+      props.children,
+      Tag("div", { class: "modal-action" }, [
+        props.actions || Tag("button", { class: "btn", onclick: close }, "Cerrar")
+      ])
+    ]),
+    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
+      Tag("button", {}, "close")
+    ])
+  ]);
+};