refactor: extract a button component

src/components/Button.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  href: string;
+  text: string;
+};
+
+const { href, text } = Astro.props as Props;
+---
+<div class="mt-6">
+  <a
+    class="inline-flex items-center py-3 px-6 text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out hover:bg-white focus:bg-white bg-blue-primary transition-color hover:text-blue-primary focus:text-blue-primary"
+    href={href}
+  >
+    {text} &rarr;
+  </a>
+</div>

src/pages/drupal-testing.mdx

@@ -3,6 +3,8 @@ layout: ~/layouts/PageLayout.astro
 title: Introduction to Automated Testing and Test-Driven Development with Drupal
 ---
 
+import Button from "~/components/Button.astro";
+
 export const drupalVersions = "9 and 10";
 
 export const prices = {
@@ -48,14 +50,10 @@ The workshop is currently only available remotely, and the next available date i
 
 Seats are available at <span class="font-bold">{isEarlyBird ? `an early bird price of £${prices.early}` : `a price of £${prices.full}`}</span>, with a 10% discount for bulk orders of 5 or more seats.
 
-<div class="mt-6">
+<Button
-  <a
+  href="https://buy.stripe.com/6oE3cW4Su7DA1t6144"
-    class="inline-flex items-center py-3 px-6 text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out hover:bg-white focus:bg-white bg-blue-primary transition-color hover:text-blue-primary focus:text-blue-primary"
+  text="Book your seat"
-    href="https://buy.stripe.com/6oE3cW4Su7DA1t6144"
+/>
-  >
-    Book your seat &rarr;
-  </a>
-</div>
 
 <hr />