add ability to show partner avatar on project card

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1729612578122
+		"lastUpdateCheck": 1730730439924
 	}
 }

src/components/Projects/ProjectCard.tsx

@@ -12,6 +12,7 @@ type ProjectCardProps = {
   project: ProjectFileType;
   userCount?: number;
   status?: 'completed' | 'started' | 'none';
+  avatar?: string;
 };
 
 const badgeVariants: Record<ProjectDifficultyType, string> = {
@@ -21,8 +22,9 @@ const badgeVariants: Record<ProjectDifficultyType, string> = {
 };
 
 export function ProjectCard(props: ProjectCardProps) {
-  const { project, userCount = 0, status } = props;
+  const { project, userCount = 0, status, avatar } = props;
   const { frontmatter, id } = project;
+  const partnerAvatar = frontmatter.partner?.avatar;
 
   const isLoadingStatus = status === undefined;
   const userStartedCount = status !== 'none' && userCount === 0 ? userCount + 1 : userCount;
@@ -46,8 +48,8 @@ export function ProjectCard(props: ProjectCardProps) {
       <span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
         {isLoadingStatus ? (
           <>
-            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />
-            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />
           </>
         ) : (
           <>
@@ -59,7 +61,7 @@ export function ProjectCard(props: ProjectCardProps) {
                 <>Be the first to solve!</>
               )}
             </span>
-
+            <span className="flex items-center gap-2">
               {status !== 'none' && (
                 <span
                   className={cn(
@@ -77,6 +79,23 @@ export function ProjectCard(props: ProjectCardProps) {
                   {status}
                 </span>
               )}
+              {partnerAvatar && frontmatter.partner?.url && (
+                <a
+                  href={frontmatter.partner.url}
+                  target="_blank"
+                  rel="noopener"
+                  onClick={(e) => e.stopPropagation()}
+                  className="flex-shrink-0"
+                  title={frontmatter.partner.name}
+                >
+                  <img
+                    src={partnerAvatar}
+                    alt={`${frontmatter.partner.name} avatar`}
+                    className="h-6 w-6 rounded-full object-cover"
+                  />
+                </a>
+              )}
+            </span>
           </>
         )}
       </span>

src/lib/project.ts

@@ -23,6 +23,11 @@ export interface ProjectFrontmatter {
     ogImageUrl: string;
   };
   roadmapIds: string[];
+  partner?: {
+    name: string;
+    avatar: string;
+    url: string;
+  };
 }
 
 export type ProjectFileType = MarkdownFileType<ProjectFrontmatter> & {