Compare commits

...

2 Commits

Author SHA1 Message Date
daniel holdsworth
01ba8d5942 replace whitespace brackets 2024-11-04 15:08:40 +00:00
daniel holdsworth
00d8b2ef6d add ability to show partner avatar on project card 2024-11-04 14:58:54 +00:00
3 changed files with 43 additions and 19 deletions

View File

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

View File

@@ -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;
@@ -59,24 +61,41 @@ export function ProjectCard(props: ProjectCardProps) {
<>Be the first to solve!</>
)}
</span>
{status !== 'none' && (
<span
className={cn(
'flex items-center gap-1.5 rounded-full border border-current px-2 py-0.5 capitalize',
status === 'completed' && 'text-green-500',
status === 'started' && 'text-yellow-500',
)}
>
<span className="flex items-center gap-2">
{status !== 'none' && (
<span
className={cn('inline-block h-2 w-2 rounded-full', {
'bg-green-500': status === 'completed',
'bg-yellow-500': status === 'started',
})}
/>
{status}
</span>
)}
className={cn(
'flex items-center gap-1.5 rounded-full border border-current px-2 py-0.5 capitalize',
status === 'completed' && 'text-green-500',
status === 'started' && 'text-yellow-500',
)}
>
<span
className={cn('inline-block h-2 w-2 rounded-full', {
'bg-green-500': status === 'completed',
'bg-yellow-500': status === 'started',
})}
/>
{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>

View File

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