125 lines
4.6 KiB
TypeScript
125 lines
4.6 KiB
TypeScript
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 {
|
|
redesSociais: RedeSocial[] | null;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
// Helper function to get social media icons
|
|
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} ${opacityClass} text-blue-600`} />;
|
|
case 'instagram':
|
|
return <FaInstagram className={`${iconClass} ${opacityClass} text-pink-600`} />;
|
|
case 'x/twitter':
|
|
case 'twitter':
|
|
return <FaXTwitter className={`${iconClass} ${opacityClass} text-black`} />;
|
|
case 'tiktok':
|
|
return <FaTiktok className={`${iconClass} ${opacityClass} text-black`} />;
|
|
case 'youtube':
|
|
return <FaYoutube className={`${iconClass} ${opacityClass} text-red-600`} />;
|
|
case 'linkedin':
|
|
return <FaLinkedin className={`${iconClass} ${opacityClass} text-blue-700`} />;
|
|
case 'whatsapp':
|
|
return <FaWhatsapp className={`${iconClass} ${opacityClass} text-green-600`} />;
|
|
case 'threads':
|
|
return <FaThreads className={`${iconClass} ${opacityClass} text-black`} />;
|
|
case 'telegram':
|
|
return <FaTelegram className={`${iconClass} ${opacityClass} text-blue-500`} />;
|
|
case 'spotify':
|
|
return <FaSpotify className={`${iconClass} ${opacityClass} text-green-500`} />;
|
|
case 'kwai':
|
|
case 'outros':
|
|
default:
|
|
return <FaLink className={`${iconClass} ${opacityClass} text-gray-600`} />;
|
|
}
|
|
};
|
|
|
|
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">
|
|
<LinkIcon className="h-8 w-8 text-orange-600 mr-3" />
|
|
<h2 className="text-2xl font-bold text-gray-900">Redes Sociais</h2>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center h-32">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-4 border-orange-600 border-t-transparent"></div>
|
|
</div>
|
|
) : redesSociais && redesSociais.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{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>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center text-gray-500 py-8">
|
|
Nenhuma rede social encontrada
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SocialMediaComponent;
|