From be169714cc44dd8ca1c70bc1abc3767674842bd2 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Thu, 27 Apr 2023 22:23:09 +0200
Subject: [PATCH] improve footer layout on smaller devices

---
 src/components/Footer.tsx | 44 ++++++++++++++++-----------------------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 088252e..8a7e5b0 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,35 +1,27 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
     <div className="mx-16 flex items-center justify-center">
       <footer className="mb-4 mt-4 flex h-full w-[1048px] flex-col-reverse items-center justify-between text-sm md:flex-row">
-        <div className="mx-8 my-[50px] text-sm text-[#666] md:my-0">
+        <div className="my-[50px] ml-8 text-sm text-[#666] md:my-0">
           © 2023 Snapify
         </div>
-        <div className="mx-8 flex w-full flex-col px-[50px] md:w-auto md:flex-row md:px-0">
-          <a
-            className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
-            href="/legal/privacy-policy"
-          >
-            Privacy Policy
-          </a>
-          <a
-            className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
-            href="/legal/terms"
-          >
-            Terms and Conditions
-          </a>
-          <a
-            className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
-            href="/legal/impressum"
-          >
-            Impressum
-          </a>
-          <a
-            className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
-            href="https://status.snapify.it"
-          >
-            Status
-          </a>
+        <div className="mr-8 flex w-full flex-col sm:px-[50px] md:w-auto md:flex-row md:gap-8 md:px-0">
+          {[
+            { name: "Privacy Policy", link: "/legal/privacy-policy" },
+            { name: "Terms and Conditions", link: "/legal/terms" },
+            { name: "Status", link: "https://status.snapify.it" },
+            { name: "Impressum", link: "/legal/impressum" },
+          ].map(({ name, link }) => (
+            <Link
+              key={name}
+              className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:border-none"
+              href={link}
+            >
+              {name}
+            </Link>
+          ))}
         </div>
       </footer>
     </div>