fix: replaced social icons with centered svg files and refactored social icon component

Author: CorinneBosch

public/icons/discord.svg

@@ -1,11 +1,27 @@
+import Image from 'next/image';
+
 import clsxm from '@/lib/clsxm';
-import trackClick from '@/lib/trackClick';
 
 interface Props {
   className?: string;
   trackingContext: string;
 }
 
+const Socials = {
+  Discord: {
+    url: 'https://discord.com/invite/VsPbrK2hJk',
+    imgSrc: '/icons/discord.svg',
+  },
+  Twitter: {
+    url: 'https://twitter.com/solana',
+    imgSrc: '/icons/twitter.svg',
+  },
+  Github: {
+    url: 'https://github.com/solana-labs/governance-ui',
+    imgSrc: '/icons/github.svg',
+  },
+};
+
 const SocialIcons = (props: Props) => {
   return (
     <div
@@ -17,33 +33,20 @@ const SocialIcons = (props: Props) => {
       )}
     >
       <div className='flex gap-x-4 md:gap-x-5'>
-        <a
-          rel='noreferrer'
-          target='_blank'
-          href='https://discord.com/invite/VsPbrK2hJk'
-          className='shadow-sm duration-500 hover:scale-125 focus:scale-125'
-          onClick={() => trackClick('discord', props.trackingContext)}
-        >
-          <img src='/icons/discord.svg' className='h-11' alt='discord' />
-        </a>
-        <a
-          rel='noreferrer'
-          target='_blank'
-          href='https://twitter.com/solana'
-          className='shadow-sm duration-500 hover:scale-125 focus:scale-125'
-          onClick={() => trackClick('twitter', props.trackingContext)}
-        >
-          <img src='/icons/twitter.svg' className='h-11' alt='twitter' />
-        </a>
-        <a
-          rel='noreferrer'
-          target='_blank'
-          href='https://github.com/solana-labs/governance-ui'
-          className='shadow-sm duration-500 hover:scale-125 focus:scale-125'
-          onClick={() => trackClick('github', props.trackingContext)}
-        >
-          <img src='/icons/github.svg' className='h-11' alt='github' />
-        </a>
+        {Object.keys(Socials).map((name) => {
+          const { url, imgSrc } = Socials[name];
+          return (
+            <a
+              key={name}
+              rel='noreferrer'
+              target='_blank'
+              href={url}
+              className='default-transition text-base duration-500 hover:scale-125'
+            >
+              <Image src={imgSrc} width={48} height={48} alt={name} />
+            </a>
+          );
+        })}
       </div>
     </div>
   );