fix issue #261

components/project/project-card.tsx

@@ -4,7 +4,12 @@ import { useRouter } from "next/navigation"
 import { VariantProps, cva } from "class-variance-authority"
 
 import { getProjectById } from "@/lib/projectsUtils"
-import { ProjectInterface, ProjectLinkWebsite } from "@/lib/types"
+import {
+  ProjectInterface,
+  ProjectLinkWebsite,
+  ProjectStatus,
+  ProjectStatusLabelMapping,
+} from "@/lib/types"
 import { cn } from "@/lib/utils"
 import { useTranslation } from "@/app/i18n/client"
 import { LocaleTypes } from "@/app/i18n/settings"
@@ -54,6 +59,12 @@ const projectCardVariants = cva(
   }
 )
 
+export const ProjectStatusColorMapping: Record<ProjectStatus, string> = {
+  active: "#D8FEA8",
+  inactive: "#FFB7AA",
+  maintained: "#FFEC9E",
+}
+
 export default function ProjectCard({
   project,
   showLinks = false,
@@ -68,7 +79,6 @@ export default function ProjectCard({
   const { id, image, links, name, tags, imageAlt, projectStatus, cardTags } =
     project ?? {}
 
-  const projectNotActive = projectStatus !== "active"
   const { content: projectContent } = getProjectById(id, lang)
 
   return (
@@ -118,11 +128,6 @@ export default function ProjectCard({
           )}
         </div>
         <div className="flex flex-col gap-2">
-          {projectNotActive && (
-            <span className="text-sm font-medium italic leading-[21px] text-tuatara-400">
-              {t("inactive")}
-            </span>
-          )}
           <div className="flex justify-between ">
             {showLinks && (
               <div className="flex items-center justify-start gap-3">
@@ -137,6 +142,15 @@ export default function ProjectCard({
                 })}
               </div>
             )}
+
+            <div
+              className="px-[6px] py-[2px] text-xs font-normal leading-none flex items-center justify-center rounded-[3px]"
+              style={{
+                backgroundColor: ProjectStatusColorMapping[projectStatus],
+              }}
+            >
+              {ProjectStatusLabelMapping[project?.projectStatus]}
+            </div>
             {cardTags && (
               <div className="flex items-center gap-1">
                 {cardTags?.primary && (

data/projects/bandada.ts

@@ -67,7 +67,7 @@ export const bandada: ProjectInterface = {
   category: ProjectCategory.APPLICATION,
   section: "pse",
   content,
-  projectStatus: ProjectStatus.ACTIVE,
+  projectStatus: ProjectStatus.MAINTAINED,
   image: "bandada.webp",
   name: "Bandada",
   links: {

data/projects/p0tion.ts

@@ -26,7 +26,7 @@ This project has been sunset and it is entering to a long term support phase (no
 export const p0tion: ProjectInterface = {
   id: "p0tion",
   category: ProjectCategory.DEVTOOLS,
-  projectStatus: ProjectStatus.INACTIVE,
+  projectStatus: ProjectStatus.MAINTAINED,
   section: "archived",
   content,
   image: "p0tion.png",

data/projects/powers-of-tau.ts

@@ -24,7 +24,7 @@ export const PerpetualPowersOfTau: ProjectInterface = {
   category: ProjectCategory.DEVTOOLS,
   image: "powers-of-tau.png",
   name: "Perpetual Powers of Tau",
-  projectStatus: ProjectStatus.INACTIVE,
+  projectStatus: ProjectStatus.MAINTAINED,
   section: "archived",
   content,
   tags: {

data/projects/zkp2p.ts

@@ -18,7 +18,7 @@ export const zkp2p: ProjectInterface = {
   category: ProjectCategory.APPLICATION,
   section: "grant",
   content,
-  image: "zkp2p.webp",
+  image: "zkp2p.png",
   name: "ZKP2P",
   links: {
     github: "https://github.com/zkp2p",

lib/types.ts

@@ -19,6 +19,7 @@ export type ProjectSection = (typeof ProjectSections)[number]
 export enum ProjectStatus {
   ACTIVE = "active",
   INACTIVE = "inactive",
+  MAINTAINED = "maintained",
 }
 export interface Faq {
   question: string
@@ -48,8 +49,10 @@ export const ProjectSectionDescriptionMapping: Record<ProjectSection, string> =
   }
 export const ProjectStatusLabelMapping: Record<ProjectStatus, string> = {
   active: "Active",
-  inactive: "Not Currently Active",
+  inactive: "Inactive",
+  maintained: "Maintained",
 }
+
 export interface AnnounceInterface {
   id: number
   type?: number