From 684d56fb7118f7e7720a2f54488274b6544d1af6 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 21 Apr 2023 14:36:24 +0100
Subject: [PATCH] refactor: extract a button component

---
 src/components/Button.astro  | 16 ++++++++++++++++
 src/pages/drupal-testing.mdx | 14 ++++++--------
 2 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Button.astro

diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 00000000..8c64bf83
--- /dev/null
+++ b/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>
diff --git a/src/pages/drupal-testing.mdx b/src/pages/drupal-testing.mdx
index 196b9890..8f30591c 100644
--- a/src/pages/drupal-testing.mdx
+++ b/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">
-  <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="https://buy.stripe.com/6oE3cW4Su7DA1t6144"
-  >
-    Book your seat &rarr;
-  </a>
-</div>
+<Button
+  href="https://buy.stripe.com/6oE3cW4Su7DA1t6144"
+  text="Book your seat"
+/>
 
 <hr />