From b71490aa8afe62e70e1d0ae9a23de5632e7417ef Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Wed, 20 Mar 2024 18:18:39 +0100
Subject: [PATCH] fixed footer link

---
 src/components/Footer/Footer.tsx | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 7e1152f..b6b14f7 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,8 +1,9 @@
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import { socialsIcons } from "../../utils/data";
 
 export default function Footer() {
   const date = new Date().getFullYear();
+
   return (
     <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
       <div className="containerMode flex justify-between items-center flex-wrap gap-2">
@@ -10,17 +11,23 @@ export default function Footer() {
           {date} @ First City Monument Bank Limited
         </p>
         <div className="footer-social-icons flex justify-end items-center gap-2">
-          {socialsIcons.map((icon, index) => (
-            <Link
-              key={index}
-              className="w-[1.875rem] h-[1.875rem]"
-              to={icon.link}
-            >
-              <img src={icon.image} alt={icon.name} />
-            </Link>
-          ))}
+          {renderSocialLinks()}
         </div>
       </div>
     </div>
   );
 }
+
+function renderSocialLinks(): JSX.Element {
+  const link = socialsIcons.map(function (item, index) {
+    let { name, image, link } = item;
+
+    return (
+      <a href={link} key={index} className="w-[1.875rem] h-[1.875rem]">
+        <img src={image} alt={name} />
+      </a>
+    );
+  });
+
+  return <ul className="flex items-center gap-2">{link}</ul>;
+}