From ba7be8401669b04a4a3a93a4b23b48be3073d86c Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sat, 17 Jun 2023 11:27:33 +0100
Subject: [PATCH] refactor: extract a Callout component

---
 src/components/Callout.astro | 15 +++++++++++++++
 src/pages/call.mdx           |  7 +++----
 2 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Callout.astro

diff --git a/src/components/Callout.astro b/src/components/Callout.astro
new file mode 100644
index 00000000..0d79ac8b
--- /dev/null
+++ b/src/components/Callout.astro
@@ -0,0 +1,15 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<aside
+  class="p-6 my-8 border border-gray-300 dark:bg-gray-800 dark:border-gray-700"
+>
+  <h2 class="mt-0">{title}</h2>
+
+  <slot />
+</aside>
diff --git a/src/pages/call.mdx b/src/pages/call.mdx
index f0f83706..76e349e9 100644
--- a/src/pages/call.mdx
+++ b/src/pages/call.mdx
@@ -12,6 +12,7 @@ testimonials:
 ---
 
 import Button from "~/components/Button.astro";
+import Callout from "~/components/Callout.astro";
 import Testimonials from "~/components/Testimonials.astro";
 import { numberOfYears } from '~/utils';
 
@@ -41,11 +42,9 @@ Price: £{frontmatter.price}
 - I'm a Drupal core contributor and maintain numerous Drupal projects, including the Override Node Options module, which is used on over 35,000 websites.
 - I'm a multiple-time DrupalCon speaker who regularly presents talks and workshops at conferences and meetups.
 
-<aside class="p-6 my-8 border border-gray-300 dark:bg-gray-800 dark:border-gray-700" markdown="1">
-  <h2 class="mt-0">Ready to book your call?</h2>
-
+<Callout title="Ready to book your call?">
   <Button href={frontmatter.link} text={`Book now for £${frontmatter.price}`} />
-</aside>
+</Callout>
 
 ## 100% money back guarantee!