Further updates on 03-11-2025
This commit is contained in:
@ -76,77 +76,106 @@ const TeamListing: React.FC<TeamListingProps> = ({
|
||||
}
|
||||
|
||||
const TeamMemberCard: React.FC<{ member: TeamMember }> = ({ member }) => {
|
||||
const [imageError, setImageError] = useState(false);
|
||||
const [imageLoading, setImageLoading] = useState(true);
|
||||
|
||||
const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
console.error('Image failed to load:', member.image);
|
||||
console.error('Member:', member.name, 'Professor ID:', member.professorId);
|
||||
const [imageError, setImageError] = useState(false);
|
||||
const [imageLoading, setImageLoading] = useState(true);
|
||||
const isTrainee = member.category === 'TRAINEE_FELLOW';
|
||||
|
||||
if (!imageError) {
|
||||
// Check if image URL is valid and not a default placeholder
|
||||
const hasValidImage = member.image &&
|
||||
member.image.trim() !== '' &&
|
||||
!member.image.includes('default-avatar') &&
|
||||
!member.image.includes('placeholder.') &&
|
||||
!member.image.includes('robot') &&
|
||||
// Only filter if URL ENDS with /profile-image (backend default endpoint)
|
||||
!(member.image.endsWith('/profile-image') ||
|
||||
member.image.includes('/profile-image?') ||
|
||||
member.image === 'https://via.placeholder.com/400');
|
||||
|
||||
const shouldShowImage = !isTrainee && hasValidImage;
|
||||
|
||||
const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
|
||||
console.error('Image failed to load:', member.image);
|
||||
console.error('Member:', member.name, 'Professor ID:', member.professorId);
|
||||
setImageError(true);
|
||||
target.src = '/images/default-avatar.jpg';
|
||||
}
|
||||
};
|
||||
setImageLoading(false);
|
||||
};
|
||||
|
||||
const handleImageLoad = () => {
|
||||
console.log('Image loaded successfully:', member.image);
|
||||
setImageLoading(false);
|
||||
};
|
||||
const handleImageLoad = () => {
|
||||
console.log('Image loaded successfully:', member.image);
|
||||
setImageLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group cursor-pointer bg-white rounded-lg border border-gray-300 overflow-hidden hover:shadow-lg transition-all duration-300"
|
||||
onClick={() => handleMemberClick(member)}
|
||||
>
|
||||
<div className="relative aspect-square overflow-hidden">
|
||||
{imageLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-100">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
return (
|
||||
<div
|
||||
className={`bg-white rounded-lg border border-gray-300 overflow-hidden transition-all duration-300 ${
|
||||
!isTrainee ? 'group cursor-pointer hover:shadow-lg' : 'cursor-default'
|
||||
}`}
|
||||
onClick={() => !isTrainee && handleMemberClick(member)}
|
||||
>
|
||||
{/* Only show image section for non-trainees */}
|
||||
{!isTrainee && (
|
||||
<div className="relative aspect-square overflow-hidden bg-gray-50">
|
||||
{shouldShowImage && !imageError ? (
|
||||
<>
|
||||
{imageLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-100">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
className={`w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 ${
|
||||
imageLoading ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
onError={handleImageError}
|
||||
onLoad={handleImageLoad}
|
||||
loading="lazy"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className="w-full h-full flex items-center justify-center"
|
||||
style={{ backgroundColor: '#e0e5eb' }}
|
||||
>
|
||||
<svg
|
||||
className="w-32 h-32 text-gray-400"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
className={`w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 ${
|
||||
imageLoading ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
onError={handleImageError}
|
||||
onLoad={handleImageLoad}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
{imageError && (
|
||||
<div className="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
|
||||
Default
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 sm:p-6">
|
||||
<h3 className="text-lg font-medium mb-2 group-hover:opacity-70 transition-opacity" style={{ color: '#012068' }}>
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed" style={{ color: '#e64838' }}>
|
||||
{member.position}
|
||||
</p>
|
||||
{member.department && (
|
||||
<p className="text-xs mt-1" style={{ color: '#666' }}>
|
||||
{member.department}
|
||||
<div className="p-4 sm:p-6">
|
||||
<h3 className="text-lg font-medium mb-2 group-hover:opacity-70 transition-opacity" style={{ color: '#012068' }}>
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed" style={{ color: '#e64838' }}>
|
||||
{member.position}
|
||||
</p>
|
||||
)}
|
||||
{member.specialty && (
|
||||
<p className="text-xs mt-1 font-medium" style={{ color: '#333' }}>
|
||||
{member.specialty}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isTrainee && (
|
||||
<>
|
||||
{member.department && (
|
||||
<p className="text-xs mt-1" style={{ color: '#666' }}>
|
||||
{member.department}
|
||||
</p>
|
||||
)}
|
||||
{member.specialty && (
|
||||
<p className="text-xs mt-1 font-medium" style={{ color: '#333' }}>
|
||||
{member.specialty}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
@ -233,7 +262,7 @@ const TeamListing: React.FC<TeamListingProps> = ({
|
||||
<h2 className="text-2xl font-bold mb-4" style={{ color: '#012068' }}>
|
||||
Trainees & Fellows
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: '#666' }}>
|
||||
<p className="text-sm mb-2" style={{ color: '#666' }}>
|
||||
Medical trainees, residents, and fellows advancing their skills and contributing to patient care
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user