From a85b63b58a3c864f71b19dfea02b4ae09a3bf00c Mon Sep 17 00:00:00 2001
From: Beau Findlay <beau@unhurd.co.uk>
Date: Wed, 24 Apr 2024 14:50:21 +0100
Subject: [PATCH] Render social icons from array

---
 src/Client/src/components/Footer.tsx      |  2 +-
 src/Client/src/components/SocialIcons.tsx | 49 +++++++++++++----------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/Client/src/components/Footer.tsx b/src/Client/src/components/Footer.tsx
index 706a944..a56079f 100644
--- a/src/Client/src/components/Footer.tsx
+++ b/src/Client/src/components/Footer.tsx
@@ -8,7 +8,7 @@ export default function Footer() {
       <div className="mx-auto py-8">
         <div className="md:flex md:items-center md:justify-between">
           <SocialIcons />
-          <p className="mt-8 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
+          <p className="mt-4 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
             &copy; {currentYear} Beau Findlay. All rights reserved.
           </p>
         </div>
diff --git a/src/Client/src/components/SocialIcons.tsx b/src/Client/src/components/SocialIcons.tsx
index 5f86245..c816a76 100644
--- a/src/Client/src/components/SocialIcons.tsx
+++ b/src/Client/src/components/SocialIcons.tsx
@@ -5,29 +5,36 @@ interface Props {
 }
 
 export default function SocialIcons({ size = 20 }: Props) {
+  const socialIcons = [
+    {
+      name: "GitHub",
+      href: "https://github.com/bdfin",
+      icon: <FaGithub size={size} />,
+    },
+    {
+      name: "LinkedIn",
+      href: "https://www.linkedin.com/in/beau-findlay/",
+      icon: <FaLinkedin size={size} />,
+    },
+    {
+      name: "Email",
+      href: "mailto:me@beaufindlay.com",
+      icon: <FaEnvelope size={size} />,
+    },
+  ];
+
   return (
     <div className="flex space-x-6 md:order-2">
-      <a
-        href="https://github.com/bdfin"
-        className="text-slate-200 hover:text-slate-500"
-      >
-        <span className="sr-only">GitHub</span>
-        <FaGithub size={size} />
-      </a>
-      <a
-        href="https://www.linkedin.com/in/beau-findlay/"
-        className="text-slate-200 hover:text-slate-500"
-      >
-        <span className="sr-only">LinkedIn</span>
-        <FaLinkedin size={size} />
-      </a>
-      <a
-        href="mailto:me@beaufindlay.com"
-        className="text-slate-200 hover:text-slate-500"
-      >
-        <span className="sr-only">Email</span>
-        <FaEnvelope size={size} />
-      </a>
+      {socialIcons.map((socialIcon) => (
+        <a
+          key={socialIcon.name}
+          href={socialIcon.href}
+          className="text-slate-200 hover:text-slate-500"
+        >
+          <span className="sr-only">{socialIcon.name}</span>
+          {socialIcon.icon}
+        </a>
+      ))}
     </div>
   );
 }