ysandler/ysandler-work
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add icon on skill badge

Browse Source
This commit is contained in:
Yehoshua Sandler 2025-05-09 15:58:57 -05:00
parent 30b66fc7fe
commit 11c0f79b88
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/project-card.tsx
View File

@ -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>