From 8b21200b4591f10328f735c076555878fe3eef55 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 4 Sep 2024 19:52:20 +0600
Subject: [PATCH] feat: add user count

---
 src/api/project.ts                      |  2 +-
 src/components/Projects/ProjectCard.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/api/project.ts b/src/api/project.ts
index 8641e1d86..18647eabd 100644
--- a/src/api/project.ts
+++ b/src/api/project.ts
@@ -4,7 +4,7 @@ import { api } from './api.ts';
 export function projectApi(context: APIContext) {
   return {
     listProjectsUserCount: async function (projectIds: string[]) {
-      return api(context).post<Record<string, string>>(
+      return api(context).post<Record<string, number>>(
         `${import.meta.env.PUBLIC_API_URL}/v1-list-projects-user-count`,
         {
           projectIds,
diff --git a/src/components/Projects/ProjectCard.tsx b/src/components/Projects/ProjectCard.tsx
index 844eee1e2..63d07dd9b 100644
--- a/src/components/Projects/ProjectCard.tsx
+++ b/src/components/Projects/ProjectCard.tsx
@@ -3,6 +3,7 @@ import type {
   ProjectDifficultyType,
   ProjectFileType,
 } from '../../lib/project.ts';
+import { Users } from 'lucide-react';
 
 type ProjectCardProps = {
   project: ProjectFileType;
@@ -34,13 +35,12 @@ export function ProjectCard(props: ProjectCardProps) {
       </span>
       <span className="mb-1 mt-2.5 font-medium">{frontmatter.title}</span>
       <span className="text-sm text-gray-500">{frontmatter.description}</span>
-      <span className="mt-2.5 text-xs text-gray-500">
-        {userCount === 0 ? (
-          <span>Be the first to start this project</span>
-        ) : (
-          <span>{userCount} user(s) have started this project</span>
-        )}
-      </span>
+      {userCount > 0 && (
+        <span className="mt-2.5 flex items-center gap-2 text-xs text-gray-500">
+          <Users className="inline-block size-3.5" />
+          {userCount} Started
+        </span>
+      )}
     </a>
   );
 }