Integrate SpeakerAvatars component into SponsorCard for improved assignee display

Author: Starefossen

src/components/SpeakerAvatars.tsx

@@ -1,4 +1,3 @@
-import { sanityImage } from '@/lib/sanity/client'
 import { Speaker } from '@/lib/speaker/types'
 import { formatSpeakerNames } from '@/lib/speaker/formatSpeakerNames'
 import { MissingAvatar } from '@/components/common/MissingAvatar'
@@ -112,11 +111,7 @@ export function SpeakerAvatars({
           >
             {speaker.image ? (
               <img
-                src={sanityImage(speaker.image)
-                  .width(imageDimensions[size].width)
-                  .height(imageDimensions[size].height)
-                  .fit('crop')
-                  .url()}
+                src={speaker.image}
                 alt={speaker.name}
                 className="absolute inset-0 h-full w-full rounded-full object-cover object-center"
               />

src/components/admin/sponsor-crm/SponsorCard.tsx

@@ -5,8 +5,9 @@ import type {
   SponsorTag,
   SignatureStatus,
 } from '@/lib/sponsor-crm/types'
+import type { Speaker } from '@/lib/speaker/types'
 import { SponsorLogo } from '@/components/SponsorLogo'
-import { MissingAvatar } from '@/components/common/MissingAvatar'
+import { SpeakerAvatars } from '@/components/SpeakerAvatars'
 import { formatNumber } from '@/lib/format'
 import {
   PencilIcon,
@@ -185,24 +186,19 @@ export function SponsorCard({
         </div>
         {/* Assignee */}
         {sponsor.assignedTo && (
-          <div
-            className="relative h-6 w-6 shrink-0 overflow-hidden rounded-full border border-gray-200/60 shadow-sm dark:border-gray-600"
-            title={sponsor.assignedTo.name}
-          >
-            {sponsor.assignedTo.image ? (
-              <img
-                src={sponsor.assignedTo.image}
-                alt={sponsor.assignedTo.name}
-                className="h-full w-full object-cover"
-              />
-            ) : (
-              <MissingAvatar
-                name={sponsor.assignedTo.name}
-                size={24}
-                className="rounded-full"
-                textSizeClass="text-[10px]"
-              />
-            )}
+          <div className="scale-[0.8] transform">
+            <SpeakerAvatars
+              speakers={[
+                {
+                  _id: sponsor.assignedTo._id,
+                  name: sponsor.assignedTo.name,
+                  image: sponsor.assignedTo.image,
+                } as Speaker,
+              ]}
+              size="sm"
+              maxVisible={1}
+              showTooltip={true}
+            />
           </div>
         )}
       </div>