dropdown

superpage/src/pages/[slug].astro

@@ -5,6 +5,7 @@ import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
 import HeaderNav from "~/components/Course/HeaderNav.astro";
+import BuyButton from "./_components/BuyButton.astro";
 
 import placeholder from "~/assets/placeholder.png";
 
@@ -120,17 +121,11 @@ const { Content } = await render(course);
                             <div
                                 class="flex flex-col justify-center gap-2.5 max-lg:w-full"
                             >
-                                <a
-                                    href="#"
-                                    class="text-black font-semibold bg-lime-400 rounded p-2.5 max-lg:text-center hover:bg-white hover:text-black transition"
-                                >
-                                    Contratar {
-                                        new Intl.NumberFormat("pt-BR", {
-                                            style: "currency",
-                                            currency: "BRL",
-                                        }).format(data.course.unit_price)
-                                    } p/ matrícula
-                                </a>
+                                <BuyButton
+                                    id={data.id}
+                                    name={data.title}
+                                    unitPrice={data.course.unit_price}
+                                />
                                 <a
                                     href="#solutions"
                                     class="text-blue-400 underline hover:no-underline text-center"