Update social icons for on hover

src/components/SocialIcons.tsx

@@ -1,14 +1,15 @@
+import React, { useState, useEffect } from "react";
 import { FaEnvelope, FaLinkedin, FaDiscord, FaTiktok } from "react-icons/fa";
 import { SiDevpost } from "react-icons/si";
 import { RiInstagramFill } from "react-icons/ri";
-import { useState, useEffect } from "react";
 
 interface SocialIconsProps {
     color?: string;
 }
 
 const SocialIcons: React.FC<SocialIconsProps> = ({ color = "currentColor" }) => {
     const [iconSize, setIconSize] = useState(40);
+    const hoverColor = '#0FA3B1'; 
 
     useEffect(() => {
         const handleResize = () => {
@@ -21,26 +22,29 @@ const SocialIcons: React.FC<SocialIconsProps> = ({ color = "currentColor" }) =>
         return () => window.removeEventListener("resize", handleResize);
     }, []);
 
+    const SocialIconLink = ({ href, Icon }: { href: string, Icon: React.ElementType }) => {
+        const [iconColor, setIconColor] = useState(color);
+
+        return (
+            <a
+                href={href}
+                onMouseEnter={() => setIconColor(hoverColor)}
+                onMouseLeave={() => setIconColor(color)}
+                style={{ transition: 'color 0.3s' }}
+            >
+                <Icon size={iconSize} color={iconColor} />
+            </a>
+        );
+    };
+
     return (
         <div className="flex justify-center items-center space-x-7">
-            <a href="mailto:[email protected]">
-                <FaEnvelope size={iconSize} color={color} />
-            </a>
-            <a href="https://www.linkedin.com/company/hawkhacks/">
-                <FaLinkedin size={iconSize} color={color} />
-            </a>
-            <a href="https://discord.gg/CwQ7mGg98N">
-                <FaDiscord size={iconSize} color={color} />
-            </a>
-            <a href="https://tiktok.com/@hawkhacks">
-                <FaTiktok size={iconSize} color={color} />
-            </a>
-            <a href="https://www.instagram.com/wluhawkhacks/">
-                <RiInstagramFill size={iconSize} color={color} />
-            </a>
-            <a href="https://hawkhacks.devpost.com/">
-                <SiDevpost size={iconSize} color={color} />
-            </a>
+            <SocialIconLink href="mailto:[email protected]" Icon={FaEnvelope} />
+            <SocialIconLink href="https://www.linkedin.com/company/hawkhacks/" Icon={FaLinkedin} />
+            <SocialIconLink href="https://discord.gg/CwQ7mGg98N" Icon={FaDiscord} />
+            <SocialIconLink href="https://tiktok.com/@hawkhacks" Icon={FaTiktok} />
+            <SocialIconLink href="https://www.instagram.com/wluhawkhacks/" Icon={RiInstagramFill} />
+            <SocialIconLink href="https://hawkhacks.devpost.com/" Icon={SiDevpost} />
         </div>
     );
 };