add social links component

Author: frontendfixer

src/components/HeroSection.tsx

@@ -1,8 +1,5 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from 'react-router-dom';
-
 import { ReactComponent as HeroIllustration } from '../assets/images/hero-illustration.svg';
-import { SocialLink, socialLinks } from '../data/Social';
+import SocialLinks from './SocialLinks';
 
 const HeroSection = () => {
   return (
@@ -25,16 +22,7 @@ const HeroSection = () => {
           <h2 className="mb-4 font-serif text-xl font-medium text-dark-900 dark:text-white md:text-3xl">
             Connect with me
           </h2>
-          <div className="flex items-center gap-4">
-            {socialLinks.map((link: SocialLink) => (
-              <Link to={link.url} key={link.id}>
-                <FontAwesomeIcon
-                  icon={link.icon}
-                  className="h-8 w-8 text-dark-900 shadow-sm transition-transform duration-300 ease-linear hover:-translate-y-1 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
-                />
-              </Link>
-            ))}
-          </div>
+          <SocialLinks />
         </div>
       </div>
       <div className="grow">