add model

superpage/src/components/Course/Plans.astro

@@ -2,51 +2,16 @@
 import { Icon } from "astro-icon/components";
 import Container from "~/components/Container.astro";
 import Contact from "./Contact.jsx";
+import Modal from "~/components/Modal.astro";
 ---
 
-<div
-    x-data="{ open: false, plan: null }"
-    x-on:keydown.esc.prevent.stop="open = false"
-    x-effect="document.body.classList.toggle('overflow-hidden', open);
-
-    if (plan) {
-      $refs.plan.dataset.plan = plan;
-      window.dispatchEvent(new CustomEvent('planUpdate', { detail: plan }));
-    }"
->
 {/* Modal */}
-    <div style="display: none;" x-show="open">
+<Modal id="planform">
-        <div class="fixed inset-0 z-40 overflow-y-auto">
-            {/* Backdrop */}
-            <div
-                x-on:click="open = false"
-                aria-hidden="true"
-                class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
-            >
-            </div>
-
-            <div class="flex justify-center items-center lg:h-full p-2.5">
-                <div
-                    class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow relative"
-                >
-                    {/* Close button */}
-                    <button
-                        x-on:click="open = false"
-                        class="cursor-pointer absolute top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
-                    >
-                        <Icon name="x-mark" class="size-4" />
-                    </button>
-
     <h1 class="text-3xl lg:text-4xl font-medium">
         Preencha os dados da sua empresa
     </h1>
-                    <div x-ref="plan" id="plan-ref" data-plan=""></div>
     <Contact url={Astro.request.url} client:load />
-                </div>
+</Modal>
-            </div>
-        </div>
-    </div>
-    {/* Modal End */}
 
 <Container {...Astro.props}>
     <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
@@ -71,11 +36,12 @@ import Contact from "./Contact.jsx";
                     <li>Gestão e autonomia direto pela plataforma</li>
                 </ul>
                 <p class="mt-auto">
-                        Ideal para empresas que treinam continuamente e precisam
+                    Ideal para empresas que treinam continuamente e precisam de
-                        de agilidade.
+                    agilidade.
                 </p>
                 <button
-                        x-on:click="open = true; plan = 'flexivel'"
+                    data-toggle="modal"
+                    data-target="#planform"
                     class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                 >
                     Saiba mais
@@ -95,15 +61,14 @@ import Contact from "./Contact.jsx";
                 <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
                     <li>Atendemos nas principais cidades do Brasil</li>
                     <li>Instrutores especialistas com vivência prática</li>
-                        <li>
+                    <li>Ideal para grandes turmas ou treinamentos práticos</li>
-                            Ideal para grandes turmas ou treinamentos práticos
-                        </li>
                 </ul>
                 <p class="mt-auto">
                     Solução sob medida, direto no seu ambiente de trabalho.
                 </p>
                 <button
-                        x-on:click="open = true; plan = 'incompany'"
+                    data-toggle="modal"
+                    data-target="#planform"
                     class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                 >
                     Saiba mais
@@ -129,7 +94,8 @@ import Contact from "./Contact.jsx";
                     Seu time com o nosso conteúdo, na sua plataforma.
                 </p>
                 <button
-                        x-on:click="open = true; plan = 'conteudo'"
+                    data-toggle="modal"
+                    data-target="#planform"
                     class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
                 >
                     Saiba mais
@@ -138,4 +104,3 @@ import Contact from "./Contact.jsx";
         </div>
     </section>
 </Container>
-</div>

superpage/src/components/Modal.astro

@@ -0,0 +1,56 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
+<dialog
+    closedby="any"
+    class="text-white bg-black fixed inset-1/2 w-full lg:w-112 -translate-1/2 p-5 lg:p-12 rounded-2xl border border-white/15 backdrop:bg-black/50 backdrop:backdrop-blur backdrop:backdrop-filter"
+    {...Astro.props}
+>
+    <button
+        class="cursor-pointer fixed top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
+        data-dismiss
+    >
+        <Icon name="x-mark" class="size-4" />
+    </button>
+
+    <div class="space-y-5">
+        <slot />
+    </div>
+</dialog>
+
+<script>
+    const modals = document.querySelectorAll("[data-toggle='modal']");
+
+    function openModal(modal: HTMLDialogElement) {
+        const close = modal.querySelector("[data-dismiss]");
+
+        modal.showModal();
+        document.body.classList.toggle("overflow-y-hidden");
+
+        modal.addEventListener(
+            "close",
+            () => {
+                document.body.classList.toggle("overflow-y-hidden");
+            },
+            { once: true },
+        );
+
+        if (close) {
+            close.addEventListener(
+                "click",
+                () => {
+                    modal.close();
+                },
+                { once: true },
+            );
+        }
+    }
+
+    modals.forEach((el) => {
+        const target = el.dataset.target;
+        const modal = document.querySelector(target);
+
+        el.addEventListener("click", () => openModal(modal));
+    });
+</script>