wiup

superpage/src/components/Course/BuyDropdown.astro

@@ -1,12 +1,52 @@
+---
+const { course } = Astro.props;
+const currency = new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+}).format(course.unit_price);
+---
+
 <details class:list={["group relative group", Astro.props.class]}>
     <summary
         class="flex bg-black hover:bg-white hover:text-black group-open:text-black group-open:bg-white font-semibold py-2.5 px-3 rounded-md cursor-pointer transition"
     >
-        <slot name="label" />
+        Contratar agora
     </summary>
     <div
-        class="absolute right-0 top-full translate-y-1 bg-stone-900 border border-white/15 min-w-74 rounded-lg shadow drop-shadow"
+        class="absolute right-0 top-full translate-y-1 bg-stone-900 border border-white/15 min-w-78 rounded-lg shadow drop-shadow p-2.5"
     >
-        <slot />
+        <strong>Selecione a opção:</strong>
+        <ul>
+            <li
+                class="p-2.5 hover:bg-white/10 rounded-lg flex gap-2.5 items-center"
+            >
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span class="uppercase">EDUSEG&reg; Flexível</span>
+            </li>
+            <li class="p-2.5 hover:bg-white/10 rounded-lg">
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span class="uppercase">EDUSEG&reg; In-Company</span>
+            </li>
+            <li class="p-2.5 hover:bg-white/10 rounded-lg">
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span class="uppercase">EDUSEG&reg; Conteúdo</span>
+            </li>
+            <li class="p-2.5 hover:bg-white/10 rounded-lg">
+                <input
+                    class="box-content size-3.5 border border-white/15 appearance-none rounded-full bg-white/5"
+                />
+                <span>Contratar {currency} p/ matrícula</span>
+            </li>
+        </ul>
+        <button
+            class="p-2.5 bg-lime-400 rounded-lg w-full text-black text-semibold"
+            >Continuar</button
+        >
     </div>
 </details>