From 11c0f79b88c3fc886ad111f7688a47be827d375f Mon Sep 17 00:00:00 2001
From: Yehoshua Sandler <accounts@tzed.io>
Date: Fri, 9 May 2025 15:58:57 -0500
Subject: [PATCH] feat: add icon on skill badge

---
 src/components/project-card.tsx | 43 +++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/project-card.tsx b/src/components/project-card.tsx
index 89e53f9..0198d6b 100644
--- a/src/components/project-card.tsx
+++ b/src/components/project-card.tsx
@@ -90,21 +90,34 @@ export function ProjectCard({
       <CardContent className="mt-auto flex flex-col px-2">
         {tags?.badges && tags.badges.length > 0 && (
           <div className="mt-2 flex flex-wrap gap-1">
-            {tags.badges.map((b, i) => (
-              <Badge
-                key={title + dates + b + i.toString()}
-                variant="secondary"
-                className={clsx(
-                  'px-1 py-0 text-[10px]',
-                  b.color || tags.defaultColor ? `bg-[${b.color || tags.defaultColor}]` : '',
-                  b.textColor || tags.defaultTextColor
-                    ? `text-[${b.textColor || tags.defaultTextColor}]`
-                    : '',
-                )}
-              >
-                {b.value}
-              </Badge>
-            ))}
+            {tags.badges.map((b, i) => {
+              const icon = b.icon as Media | undefined
+              return (
+                <Badge
+                  key={title + dates + b + i.toString()}
+                  variant="secondary"
+                  className={clsx(
+                    'px-1 py-0 text-[10px]',
+                    b.color || tags.defaultColor ? `bg-[${b.color || tags.defaultColor}]` : '',
+                    b.textColor || tags.defaultTextColor
+                      ? `text-[${b.textColor || tags.defaultTextColor}]`
+                      : '',
+                  )}
+                >
+                  {!!icon && icon.url && (
+                    <Image
+                      src={icon.url}
+                      alt={icon.alt || ''}
+                      width={16}
+                      height={16}
+                      className="not-[dark]:invert"
+                    />
+                  )}
+
+                  {b.value}
+                </Badge>
+              )
+            })}
           </div>
         )}
       </CardContent>