all about improvements

src/components/CandidatePage/SocialMediaComponent.tsx

@@ -1,5 +1,18 @@
 import React from 'react';
 import { LinkIcon } from '@heroicons/react/24/outline';
+import { 
+  FaFacebook, 
+  FaInstagram, 
+  FaTwitter, 
+  FaTiktok, 
+  FaYoutube, 
+  FaLinkedin, 
+  FaWhatsapp, 
+  FaTelegram, 
+  FaSpotify,
+  FaLink
+} from 'react-icons/fa';
+import { FaXTwitter, FaThreads } from 'react-icons/fa6';
 import { type RedeSocial } from '../../api';
 
 interface SocialMediaComponentProps {
@@ -7,12 +20,45 @@ interface SocialMediaComponentProps {
   isLoading: boolean;
 }
 
+// Helper function to get social media icons
+const getSocialMediaIcon = (rede: string): React.ReactElement => {
+  const iconClass = "h-5 w-5 mr-2";
+  
+  switch (rede.toLowerCase()) {
+    case 'facebook':
+      return <FaFacebook className={`${iconClass} text-blue-600`} />;
+    case 'instagram':
+      return <FaInstagram className={`${iconClass} text-pink-600`} />;
+    case 'x/twitter':
+    case 'twitter':
+      return <FaXTwitter className={`${iconClass} text-black`} />;
+    case 'tiktok':
+      return <FaTiktok className={`${iconClass} text-black`} />;
+    case 'youtube':
+      return <FaYoutube className={`${iconClass} text-red-600`} />;
+    case 'linkedin':
+      return <FaLinkedin className={`${iconClass} text-blue-700`} />;
+    case 'whatsapp':
+      return <FaWhatsapp className={`${iconClass} text-green-600`} />;
+    case 'threads':
+      return <FaThreads className={`${iconClass} text-black`} />;
+    case 'telegram':
+      return <FaTelegram className={`${iconClass} text-blue-500`} />;
+    case 'spotify':
+      return <FaSpotify className={`${iconClass} text-green-500`} />;
+    case 'kwai':
+    case 'outros':
+    default:
+      return <FaLink className={`${iconClass} text-gray-600`} />;
+  }
+};
+
 const SocialMediaComponent: React.FC<SocialMediaComponentProps> = ({ 
   redesSociais, 
   isLoading 
 }) => {
   return (
-    <div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
+    <div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.01] transition-all duration-200 p-6">
       <div className="flex items-center mb-6">
         <LinkIcon className="h-8 w-8 text-orange-600 mr-3" />
         <h2 className="text-2xl font-bold text-gray-900">Redes Sociais</h2>
@@ -29,6 +75,7 @@ const SocialMediaComponent: React.FC<SocialMediaComponentProps> = ({
               <div className="flex items-center justify-between">
                 <div className="flex-1">
                   <div className="flex items-center mb-2">
+                    {getSocialMediaIcon(redeSocial.rede)}
                     <span className="font-semibold text-gray-900 mr-2">{redeSocial.rede}</span>
                     <span className="text-sm text-gray-500">({redeSocial.ano})</span>
                   </div>