add icons for project status

components/icons.tsx

@@ -82,4 +82,34 @@ export const Icons = {
       />
     </svg>
   ),
+  checkActive: (props: LucideProps) => (
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12.25 1.86456V12.3739C12.2488 12.5271 12.1873 12.6736 12.079 12.7819C11.9706 12.8902 11.8239 12.9515 11.6707 12.9526H2.32925C2.17572 12.9526 2.02848 12.8916 1.91986 12.7831C1.81125 12.6746 1.75015 12.5274 1.75 12.3739V1.86456C1.75122 1.71136 1.81266 1.5648 1.92104 1.45652C2.02943 1.34825 2.17605 1.28696 2.32925 1.28589H11.6707C11.9904 1.28589 12.25 1.54489 12.25 1.86456ZM6.58758 7.77372L5.14383 6.32939L4.319 7.15481L6.58758 9.42339L9.8875 6.12347L9.06267 5.29864L6.58758 7.77314V7.77372Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  archived: (props: LucideProps) => (
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.74984 6.33333H12.2498V12.169C12.2498 12.4898 11.9903 12.75 11.6706 12.75H2.32909C2.25289 12.7499 2.17746 12.7348 2.1071 12.7056C2.03675 12.6763 1.97284 12.6335 1.91905 12.5796C1.86525 12.5256 1.82262 12.4616 1.79358 12.3911C1.76455 12.3207 1.74968 12.2452 1.74984 12.169V6.33333ZM5.24984 7.5V8.66667H8.74984V7.5H5.24984ZM1.1665 2.83333C1.1665 2.51133 1.43192 2.25 1.74517 2.25H12.2545C12.5742 2.25 12.8332 2.509 12.8332 2.83333V5.16667H1.1665V2.83333Z"
+        fill="#242528"
+      />
+    </svg>
+  ),
 }

components/project/project-detail-tags.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { HtmlHTMLAttributes } from "react"
 import Link from "next/link"
 import {
@@ -8,10 +10,12 @@ import {
 import { ProjectInterface } from "@/lib/types"
 
 import { CategoryTag } from "../ui/categoryTag"
+import { ThemesStatusMapping } from "./project-filters-bar"
 
 interface TagsProps extends HtmlHTMLAttributes<HTMLDivElement> {
   label: string
 }
+
 const TagsWrapper = ({ label, children }: TagsProps) => {
   return (
     <div className="flex gap-2">
@@ -22,6 +26,8 @@ const TagsWrapper = ({ label, children }: TagsProps) => {
 }
 
 export function ProjectTags({ project }: { project: ProjectInterface }) {
+  const { label, icon } = ThemesStatusMapping?.[project?.projectStatus] ?? {}
+
   return (
     <div className="flex flex-col gap-4 mt-8">
       {Object.entries(FilterLabelMapping).map(([key, label]) => {
@@ -50,7 +56,14 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
           )
         )
       })}
-      <TagsWrapper label="Project status"></TagsWrapper>
+      <TagsWrapper label="Project status">
+        <CategoryTag variant="gray">
+          <div className="flex items-center gap-1">
+            {icon}
+            {label}
+          </div>
+        </CategoryTag>
+      </TagsWrapper>
     </div>
   )
 }

components/project/project-filters-bar.tsx

@@ -59,24 +59,22 @@ export const ThemesButtonMapping: Record<
   },
 }
 
-export const ThemesStatusMapping: Record<
-  ProjectStatusType,
-  {
-    label: string
-    icon: any
-  }
+export const ThemesStatusMapping: Partial<
+  Record<
+    ProjectStatusType,
+    {
+      label: string
+      icon: any
+    }
+  >
 > = {
   active: {
     label: "Active",
-    icon: <Icons.hammer />,
+    icon: <Icons.checkActive />,
   },
   archived: {
     label: "Archived",
-    icon: <Icons.hand />,
-  },
-  inactive: {
-    label: "Inactive",
-    icon: <Icons.readme />,
+    icon: <Icons.archived />,
   },
 }