From 2522d2414d2e69bc3165436186fca69fdeb7daad Mon Sep 17 00:00:00 2001
From: Alabi Ibrahim Abimbola
 <139625252+abimbolaalabi@users.noreply.github.com>
Date: Mon, 19 Oct 2026 13:24:42 +0100
Subject: [PATCH] fix(cards): optimize project logo and fall back to initials

---
 components/cards/opportunity-card.tsx | 22 ++++++++--------------
 components/ui/avatar.tsx              |  7 ++++++-
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/cards/opportunity-card.tsx b/components/cards/opportunity-card.tsx
index cf152ce3..9388746d 100644
--- a/components/cards/opportunity-card.tsx
+++ b/components/cards/opportunity-card.tsx
@@ -10,6 +10,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import type { ReactNode } from 'react';
 
+import { Avatar } from '@/components/ui/avatar';
 import { deriveInitials } from '@/lib/initials';
 import { cn } from '@/lib/utils';
 
@@ -98,20 +99,13 @@ export function OpportunityCard({
     >
       <div className='flex items-center gap-2'>
         <div className='flex min-w-0 flex-1 items-center gap-2'>
-          {logo ? (
-            <Image
-              src={logo}
-              width={24}
-              height={24}
-              alt={org}
-              unoptimized
-              className='size-6 shrink-0 rounded-full bg-[#fefefe] object-cover'
-            />
-          ) : (
-            <span className='flex size-6 shrink-0 items-center justify-center rounded-full bg-[#fefefe] text-[10px] font-bold text-neutral-900'>
-              {deriveInitials(title)}
-            </span>
-          )}
+          <Avatar
+            src={logo}
+            initials={deriveInitials(title)}
+            alt={title}
+            size='xs'
+            className='shrink-0'
+          />
           <span className='truncate text-sm font-medium text-muted-foreground'>
             {org}
           </span>
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 36ee3b18..7144c4b2 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,5 +1,8 @@
+'use client';
+
 import { Camera, Check, User } from 'lucide-react';
 import Image from 'next/image';
+import { useState } from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -131,6 +134,7 @@ export function Avatar({
   className,
 }: AvatarProps) {
   const hasStatus = status !== 'none';
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
 
   return (
     <div className={cn('relative shrink-0', sizeClass[size], className)}>
@@ -141,13 +145,14 @@ export function Avatar({
           hasStatus && 'border-[1.5px] border-white'
         )}
       >
-        {src ? (
+        {src !== undefined && src !== failedSrc ? (
           <Image
             src={src}
             alt={alt}
             fill
             className='object-cover'
             sizes={`${({ xs: 24, sm: 32, md: 40, lg: 48, xl: 56, '2xl': 64, '3xl': 80 } as const)[size]}px`}
+            onError={() => setFailedSrc(src)}
           />
         ) : initials ? (
           <span