From a4c65277cb516701d3ae4f9113e5e12d2ea790a1 Mon Sep 17 00:00:00 2001
From: Eli <88557639+lishaduck@users.noreply.github.com>
Date: Sun, 17 Dec 2023 15:50:38 -0600
Subject: [PATCH] chore(web): generate footer icons on the fly

AKA, move them into a list so I only have to update the jsx once.
---
 src/components/Footer.tsx | 66 ++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 094ffb8a..34ed6fb1 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -24,6 +24,28 @@ const Footer: FunctionalComponent = () => {
       ],
     },
   ];
+  const icons = [
+    {
+      Icon: IconLemon2,
+      href: "https://fresh.deno.dev/",
+      name: "Fresh",
+    },
+    {
+      Icon: IconBrandDeno,
+      href: "https://deno.com/",
+      name: "Deno",
+    },
+    {
+      Icon: IconBrandReact,
+      href: "https://preactjs.com/",
+      name: "Preact",
+    },
+    {
+      Icon: IconBrandTailwind,
+      href: "https://tailwindcss.com/",
+      name: "Tailwind",
+    },
+  ];
 
   return (
     <div class="bg-white dark:bg-black flex flex-col sm:flex-row w-full max-w-screen-xlg gap-8 md:gap-16 px-8 py-8 text-sm">
@@ -62,35 +84,21 @@ const Footer: FunctionalComponent = () => {
         <div class="text-xs">
           Made with
         </div>
-        <a
-          href="https://fresh.deno.dev/"
-          class="inline-block hover:text-black dark:hover:text-white"
-          aria-label="Fresh"
-        >
-          <IconLemon2 aria-hidden="true" />
-        </a>
-        <a
-          href="https://deno.com/"
-          class="inline-block hover:text-black dark:hover:text-white"
-          aria-label="Deno"
-        >
-          <IconBrandDeno aria-hidden="true" />
-        </a>
-        <br />
-        <a
-          href="https://preactjs.com/"
-          class="inline-block hover:text-black dark:hover:text-white"
-          aria-label="Preact"
-        >
-          <IconBrandReact aria-hidden="true" />
-        </a>
-        <a
-          href="https://tailwindcss.com/"
-          class="inline-block hover:text-black dark:hover:text-white"
-          aria-label="Tailwind"
-        >
-          <IconBrandTailwind aria-hidden="true" />
-        </a>
+        {icons.map(({ Icon, href, name }, index) => {
+          console.log(index);
+          return (
+            <>
+              <a
+                href={href}
+                class="inline-block hover:text-black dark:hover:text-white"
+                title={name}
+              >
+                <Icon aria-hidden="true" />
+              </a>
+              {index % 2 === 1 ? <br /> : <></>}
+            </>
+          );
+        })}
       </div>
     </div>
   );