feat: allow side notes to accept children

_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'.

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 " />

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 }) => {