Improved footer component

Aayush259 · Jul 23, 2024 · 22849c7 · 22849c7
1 parent 2bbbba7
commit 22849c7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -6,6 +6,7 @@ import linkedinDark from '../../images/linkedin-dark.svg';
 import linkedinLight from '../../images/linkedin-light.svg';
 import githubDark from '../../images/github-dark.svg';
 import githubLight from '../../images/github-light.svg';
+import FooterLink from './FooterLink';
 
 export default function Footer({ theme }) {
 
@@ -15,24 +16,30 @@ export default function Footer({ theme }) {
         'dark':  {x: xLight, linkedin: linkedinLight, github: githubLight}
     };
 
-    const githubIcon = iconMap[theme]['github'];
-    const xIcon = iconMap[theme]['x'];
-    const linkedinIcon = iconMap[theme]['linkedin'];
+    // This function generates a link object which contains necessary details about link.
+    const getLinkObject = (linkName, linkTo, linkIcon) => ({
+        linkName,
+        linkTo,
+        linkIcon,
+    });
+
+    // Array of objects for all social links.
+    const allSocialLinks = [
+        getLinkObject('Twitter/X', 'https://x.com/Aayush259_', iconMap[theme]['x']),
+        getLinkObject('GitHub', 'https://github.com/Aayush259', iconMap[theme]['github']),
+        getLinkObject('LinkedIn', 'https://www.linkedin.com/in/aayush-kumar-kumawat/', iconMap[theme]['linkedin']),
+    ];
 
     return (
         <footer className={`footer ${theme}`}>
             <div className='socialLinksContainer flex'>
-                <a href='https://x.com/Aayush259_' className='socialLink' target='_blank'>
-                    <img src={xIcon} alt="Aayush's twitter/X" height={25} />
-                </a>
-
-                <a href='https://github.com/Aayush259' className='socialLink' target='_blank'>
-                    <img src={githubIcon} alt="Aayush's twitter/X" height={25} />
-                </a>
+
+                {
+                    allSocialLinks.map(link => (
+                        <FooterLink key={link['linkName']} linkDetails={link} />
+                    ))
+                }
 
-                <a href='https://www.linkedin.com/in/aayush-kumar-kumawat/' className='socialLink' target='_blank'>
-                    <img src={linkedinIcon} alt="Aayush's twitter/X" height={25} />
-                </a>
             </div>
             <div className='about'></div>
         </footer>

diff --git a/src/components/footer/FooterLink.jsx b/src/components/footer/FooterLink.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function FooterLink({ linkDetails }) {
+
+    // Getting link details.
+    const linkName = linkDetails['linkName'];
+    const linkTo = linkDetails['linkTo'];
+    const linkIcon = linkDetails['linkIcon'];
+
+    return (
+        <a
+            href={linkTo}
+            target="_blank"
+            className="socialLink"
+        >
+            <img src={linkIcon} alt={linkName} height={25} />
+        </a>
+    );
+};
+
+FooterLink.propTypes = {
+    linkDetails: PropTypes.object.isRequired,
+};