fix
This commit is contained in:
@@ -333,16 +333,17 @@ export default function AgentDashboard() {
|
||||
<div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
|
||||
{/* Profile Image */}
|
||||
<div className="relative w-[200px] lg:w-[260px]">
|
||||
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden">
|
||||
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden relative">
|
||||
{/* Initials base layer */}
|
||||
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center rounded-[15px]">
|
||||
<span className="font-bold text-[#00293d] text-[80px]">{agentProfile?.firstName?.[0]?.toUpperCase() || '?'}</span>
|
||||
</div>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={getProfileImageUrl()}
|
||||
alt="Profile"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = defaultImage;
|
||||
}}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
|
||||
/>
|
||||
{/* Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
|
||||
|
||||
@@ -28,6 +28,7 @@ export function ConnectionCard({
|
||||
onMessage,
|
||||
}: ConnectionCardProps) {
|
||||
const [avatarLoaded, setAvatarLoaded] = useState(false);
|
||||
const [avatarError, setAvatarError] = useState(false);
|
||||
const placeholder = '/assets/icons/user-placeholder-icon.svg';
|
||||
const isPlaceholder = !avatar || avatar === placeholder;
|
||||
|
||||
@@ -36,20 +37,18 @@ export function ConnectionCard({
|
||||
{/* Avatar */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-[80px] h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
|
||||
{isPlaceholder ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-[#c4d9d4]">
|
||||
<Image src={placeholder} alt={name} width={40} height={40} className="opacity-50" />
|
||||
</div>
|
||||
) : !avatarLoaded ? (
|
||||
<div className="absolute inset-0 rounded-full shimmer-loading" />
|
||||
) : null}
|
||||
{avatar && !isPlaceholder && (
|
||||
{/* Initials base layer */}
|
||||
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
|
||||
<span className="font-bold text-[#00293d] text-[32px]">{name?.[0]?.toUpperCase() || '?'}</span>
|
||||
</div>
|
||||
{avatar && !isPlaceholder && !avatarError && (
|
||||
<img
|
||||
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
|
||||
src={avatar}
|
||||
alt={name}
|
||||
className={`absolute inset-0 w-full h-full object-cover rounded-full transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
onLoad={() => setAvatarLoaded(true)}
|
||||
onError={() => setAvatarError(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -42,6 +42,7 @@ export function InvitationCard({
|
||||
onIgnore,
|
||||
}: InvitationCardProps) {
|
||||
const [avatarLoaded, setAvatarLoaded] = useState(false);
|
||||
const [avatarError, setAvatarError] = useState(false);
|
||||
const placeholder = '/assets/icons/user-placeholder-icon.svg';
|
||||
const isPlaceholder = !avatar || avatar === placeholder;
|
||||
|
||||
@@ -50,20 +51,18 @@ export function InvitationCard({
|
||||
{/* Avatar */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-[80px] h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
|
||||
{isPlaceholder ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-[#c4d9d4]">
|
||||
<Image src={placeholder} alt={name} width={40} height={40} className="opacity-50" />
|
||||
</div>
|
||||
) : !avatarLoaded ? (
|
||||
<div className="absolute inset-0 rounded-full shimmer-loading" />
|
||||
) : null}
|
||||
{avatar && !isPlaceholder && (
|
||||
{/* Initials base layer */}
|
||||
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
|
||||
<span className="font-bold text-[#00293d] text-[32px]">{name?.[0]?.toUpperCase() || '?'}</span>
|
||||
</div>
|
||||
{avatar && !isPlaceholder && !avatarError && (
|
||||
<img
|
||||
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
|
||||
src={avatar}
|
||||
alt={name}
|
||||
className={`absolute inset-0 w-full h-full object-cover rounded-full transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
onLoad={() => setAvatarLoaded(true)}
|
||||
onError={() => setAvatarError(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user