Update project card and fix warnings

src/components/Projects/ProjectCard.tsx

@@ -21,9 +21,12 @@ const badgeVariants: Record<ProjectDifficultyType, string> = {
 
 export function ProjectCard(props: ProjectCardProps) {
   const { project, userCount = 0, status } = props;
-
   const { frontmatter, id } = project;
 
+  const isLoadingStatus = status === undefined;
+  const userStartedCount =
+    status && status !== 'none' ? userCount + 1 : userCount;
+
   return (
     <a
       href={`/projects/${id}`}
@@ -36,28 +39,36 @@ export function ProjectCard(props: ProjectCardProps) {
         />
         <Badge variant={'grey'} text={frontmatter.nature} />
       </span>
-      <span className="my-3 flex flex-col">
+      <span className="my-3 flex flex-col min-h-[100px]">
         <span className="mb-1 font-medium">{frontmatter.title}</span>
         <span className="text-sm text-gray-500">{frontmatter.description}</span>
       </span>
-      <span className="flex items-center gap-2 text-xs text-gray-400">
+      <span className="flex items-center justify-between gap-2 text-xs text-gray-400 min-h-[22px]">
-        <Users className="inline-block size-3.5" />
+        <span className="flex items-center gap-1.5">
-        {userCount > 0 ? (
+          <Users className="size-3.5" />
-          <>{formatCommaNumber(userCount)} Started</>
+          {userCount > 0 ? (
-        ) : (
+            <>{formatCommaNumber(userCount)} Started</>
-          <>Be the first to solve!</>
+          ) : (
-        )}
+            <>Be the first to solve!</>
+          )}
+        </span>
 
         {status !== 'none' && (
           <>
-            <span>&middot;</span>
             <span
               className={cn(
-                'capitalize',
+                'flex items-center gap-1.5 capitalize border rounded-full px-2 py-0.5 border-current',
                 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>
           </>

src/components/Projects/ProjectsList.tsx

@@ -58,7 +58,7 @@ export function ProjectsList(props: ProjectsListProps) {
     ProjectDifficultyType | undefined
   >(urlDifficulty);
   const [projectStatuses, setProjectStatuses] =
-    useState<ListProjectStatusesResponse>({});
+    useState<ListProjectStatusesResponse>();
 
   const loadProjectStatuses = async () => {
     const projectIds = projects.map((project) => project.id);
@@ -112,6 +112,7 @@ export function ProjectsList(props: ProjectsListProps) {
         <div className="flex flex-wrap gap-1">
           {projectDifficulties.map((projectDifficulty) => (
             <DifficultyButton
+              key={projectDifficulty}
               onClick={() => {
                 setDifficulty(projectDifficulty);
                 setUrlParams({ difficulty: projectDifficulty });
@@ -166,9 +167,14 @@ export function ProjectsList(props: ProjectsListProps) {
             const count = userCounts[matchingProject?.id] || 0;
             return (
               <ProjectCard
+                key={matchingProject.id}
                 project={matchingProject}
                 userCount={count}
-                status={projectStatuses?.[matchingProject.id] ?? 'none'}
+                status={
+                  projectStatuses
+                    ? (projectStatuses?.[matchingProject.id] ?? 'none')
+                    : undefined
+                }
               />
             );
           })}