melhorias no design

src/components/CandidatePage/SocialMediaComponent.tsx

@@ -21,35 +21,36 @@ interface SocialMediaComponentProps {
 }
 
 // Helper function to get social media icons
-const getSocialMediaIcon = (rede: string): React.ReactElement => {
+const getSocialMediaIcon = (rede: string, isRecent: boolean = true): React.ReactElement => {
   const iconClass = "h-5 w-5 mr-2";
+  const opacityClass = isRecent ? "" : "opacity-50";
   
   switch (rede.toLowerCase()) {
     case 'facebook':
-      return <FaFacebook className={`${iconClass} text-blue-600`} />;
+      return <FaFacebook className={`${iconClass} ${opacityClass} text-blue-600`} />;
     case 'instagram':
-      return <FaInstagram className={`${iconClass} text-pink-600`} />;
+      return <FaInstagram className={`${iconClass} ${opacityClass} text-pink-600`} />;
     case 'x/twitter':
     case 'twitter':
-      return <FaXTwitter className={`${iconClass} text-black`} />;
+      return <FaXTwitter className={`${iconClass} ${opacityClass} text-black`} />;
     case 'tiktok':
-      return <FaTiktok className={`${iconClass} text-black`} />;
+      return <FaTiktok className={`${iconClass} ${opacityClass} text-black`} />;
     case 'youtube':
-      return <FaYoutube className={`${iconClass} text-red-600`} />;
+      return <FaYoutube className={`${iconClass} ${opacityClass} text-red-600`} />;
     case 'linkedin':
-      return <FaLinkedin className={`${iconClass} text-blue-700`} />;
+      return <FaLinkedin className={`${iconClass} ${opacityClass} text-blue-700`} />;
     case 'whatsapp':
-      return <FaWhatsapp className={`${iconClass} text-green-600`} />;
+      return <FaWhatsapp className={`${iconClass} ${opacityClass} text-green-600`} />;
     case 'threads':
-      return <FaThreads className={`${iconClass} text-black`} />;
+      return <FaThreads className={`${iconClass} ${opacityClass} text-black`} />;
     case 'telegram':
-      return <FaTelegram className={`${iconClass} text-blue-500`} />;
+      return <FaTelegram className={`${iconClass} ${opacityClass} text-blue-500`} />;
     case 'spotify':
-      return <FaSpotify className={`${iconClass} text-green-500`} />;
+      return <FaSpotify className={`${iconClass} ${opacityClass} text-green-500`} />;
     case 'kwai':
     case 'outros':
     default:
-      return <FaLink className={`${iconClass} text-gray-600`} />;
+      return <FaLink className={`${iconClass} ${opacityClass} text-gray-600`} />;
   }
 };
 
@@ -57,6 +58,11 @@ const SocialMediaComponent: React.FC<SocialMediaComponentProps> = ({
   redesSociais, 
   isLoading 
 }) => {
+  // Calculate the most recent year from all social media entries
+  const mostRecentYear = redesSociais && redesSociais.length > 0 
+    ? Math.max(...redesSociais.map(rede => rede.ano))
+    : null;
+
   return (
     <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">
@@ -70,27 +76,41 @@ const SocialMediaComponent: React.FC<SocialMediaComponentProps> = ({
         </div>
       ) : redesSociais && redesSociais.length > 0 ? (
         <div className="space-y-3">
-          {redesSociais.map((redeSocial: RedeSocial, index: number) => (
-            <div key={`${redeSocial.idCandidato}-${redeSocial.rede}-${index}`} className="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition-colors">
-              <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>
+          {redesSociais.map((redeSocial: RedeSocial, index: number) => {
+            const isRecent = redeSocial.ano === mostRecentYear;
+            return (
+              <div 
+                key={`${redeSocial.idCandidato}-${redeSocial.rede}-${index}`} 
+                className={`border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition-colors ${
+                  isRecent ? '' : 'opacity-95 hover:bg-gray-100'
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center mb-2">
+                      {getSocialMediaIcon(redeSocial.rede, isRecent)}
+                      <span className={`font-semibold mr-2 ${isRecent ? 'text-gray-900' : 'text-gray-500'}`}>
+                        {redeSocial.rede}
+                      </span>
+                      <span className="text-sm text-gray-500">({redeSocial.ano})</span>
+                    </div>
+                    <a 
+                      href={redeSocial.link} 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className={`text-sm break-all transition-colors ${
+                        isRecent 
+                          ? 'text-blue-600 hover:text-blue-800' 
+                          : 'text-blue-400 hover:text-blue-600'
+                      }`}
+                    >
+                      {redeSocial.link}
+                    </a>
                   </div>
-                  <a 
-                    href={redeSocial.link} 
-                    target="_blank" 
-                    rel="noopener noreferrer"
-                    className="text-blue-600 hover:text-blue-800 text-sm break-all transition-colors"
-                  >
-                    {redeSocial.link}
-                  </a>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       ) : (
         <div className="text-center text-gray-500 py-8">