Render social icons from array

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>

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">
+      {socialIcons.map((socialIcon) => (
         <a
-        href="https://github.com/bdfin"
+          key={socialIcon.name}
+          href={socialIcon.href}
           className="text-slate-200 hover:text-slate-500"
         >
-        <span className="sr-only">GitHub</span>
+          <span className="sr-only">{socialIcon.name}</span>
-        <FaGithub size={size} />
+          {socialIcon.icon}
-      </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>
+      ))}
     </div>
   );
 }