From ce9c841dd8a5ab25ac4499b9379b19bf44a84019 Mon Sep 17 00:00:00 2001
From: zpuckeridge <zacchary@puckeridge.me>
Date: Wed, 30 Oct 2024 04:15:28 +0000
Subject: [PATCH] feat: allow side notes to accept children

---
 _content/is-gods-love-reckless.mdx | 14 ++++++++++----
 components/link-with-icon.tsx      |  2 +-
 components/side-note.tsx           |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/_content/is-gods-love-reckless.mdx b/_content/is-gods-love-reckless.mdx
index e83807d8..06641812 100644
--- a/_content/is-gods-love-reckless.mdx
+++ b/_content/is-gods-love-reckless.mdx
@@ -24,10 +24,16 @@ Many people are quick to defend the use of the word with the following argument:
 
 Cory Asbury himself also came out with a defence for the use of the word 'reckless':
 
-<SideNote note="Originally posted on Facebook, I unfortunately cannot find a link to the post anymore.">
-  > "When I use the phrase, 'the reckless love of God', I’m not saying that God
-  Himself is reckless. I am, however, saying that the way He loves, is in many
-  regards, quite so." — Cory Asbury
+<SideNote
+  note={
+    <a href="https://www.facebook.com/coryasburymusic/posts/many-have-asked-me-for-clarity-on-the-phrase-reckless-love-many-have-wondered-wh/10158977378510171/">
+      Link to full statement
+    </a>
+  }
+>
+  > "When I use the phrase, “the reckless love of God”, I’m not saying that God
+  > Himself is reckless. I am, however, saying that the way He loves, is in many
+  > regards, quite so." — Cory Asbury
 </SideNote>
 
 Firstly, to understand the controversy and why there is an issue with the word, we must look at the definition of 'reckless'.
diff --git a/components/link-with-icon.tsx b/components/link-with-icon.tsx
index b8128797..f5dc0969 100644
--- a/components/link-with-icon.tsx
+++ b/components/link-with-icon.tsx
@@ -11,7 +11,7 @@ const LinkWithIcon = ({
     <a
       href={href}
       target="_blank"
-      className="text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-600 transition  inline-flex group ease-in-out"
+      className="text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-600 transition inline-flex group ease-in-out"
     >
       {children}
       <ArrowTopRightIcon className="w-3 h-3 text-muted-foreground mt-1 group-hover:translate-x-[0.125rem] group-hover:-translate-y-[0.125rem] ease-in-out transition-all " />
diff --git a/components/side-note.tsx b/components/side-note.tsx
index 0927a6ef..d977afcb 100644
--- a/components/side-note.tsx
+++ b/components/side-note.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 
 interface SideNoteProps {
   children: React.ReactNode;
-  note: string;
+  note: React.ReactNode;
 }
 
 const SideNote: FC<SideNoteProps> = ({ children, note }) => {