Merge pull request #83 from privacy-scaling-explorations/project-status

project status

app/projects/[id]/page.tsx

@@ -5,18 +5,14 @@ import { projects } from "@/data/projects"
 import GithubVector from "@/public/social-medias/github-fill.svg"
 import GlobalVector from "@/public/social-medias/global-line.svg"
 import TwitterVector from "@/public/social-medias/twitter-fill.svg"
-import {
-  FilterLabelMapping,
-  ProjectFilter,
-  filterProjects,
-} from "@/state/useProjectFiltersState"
+import { filterProjects } from "@/state/useProjectFiltersState"
 
 import { ProjectInterface } from "@/lib/types"
 import { shuffleArray } from "@/lib/utils"
-import { CategoryTag } from "@/components/ui/categoryTag"
 import { Markdown } from "@/components/ui/markdown"
 import { Icons } from "@/components/icons"
 import ProjectCard from "@/components/project/project-card"
+import { ProjectTags } from "@/components/project/project-detail-tags"
 import ProjectExtraLinks from "@/components/project/project-extra-links"
 
 type PageProps = {
@@ -55,38 +51,6 @@ export async function generateMetadata(
   }
 }
 
-function ProjectTags({ project }: ProjectProps) {
-  return (
-    <div className="flex flex-col gap-4 mt-8">
-      {Object.entries(FilterLabelMapping).map(([key, label]) => {
-        const keyTags = project?.tags?.[key as ProjectFilter]
-        const hasItems = keyTags && keyTags?.length > 0
-
-        return (
-          hasItems && (
-            <div>
-              <div className="flex items-center gap-2">
-                <span className="py-2 text-base font-medium ">{label}</span>
-                <div className="flex gap-[6px] flex-wrap">
-                  {keyTags?.map((tag) => {
-                    return (
-                      <Link href={`/projects?${key}=${tag}`}>
-                        <CategoryTag key={tag} variant="gray">
-                          {tag}
-                        </CategoryTag>
-                      </Link>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-          )
-        )
-      })}
-    </div>
-  )
-}
-
 function DiscoverMoreProjects({ project }: ProjectProps) {
   const getSuggestedProjects = () => {
     const projectList = projects.filter((p) => p.id !== project.id)

components/project/project-detail-tags.tsx

@@ -18,7 +18,7 @@ interface TagsProps extends HtmlHTMLAttributes<HTMLDivElement> {
 
 const TagsWrapper = ({ label, children }: TagsProps) => {
   return (
-    <div className="flex gap-2">
+    <div className="flex items-center gap-2">
       <span className="py-2 text-base font-medium ">{label}</span>
       {children}
     </div>
@@ -40,7 +40,7 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
           hasItems && (
             <div>
               <TagsWrapper label={label}>
-                <div className="flex gap-[6px]">
+                <div className="flex gap-[6px] flex-wrap">
                   {keyTags?.map((tag) => {
                     return (
                       <Link href={`/projects?${key}=${tag}`}>
@@ -57,7 +57,7 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
         )
       })}
       <TagsWrapper label="Project status">
-        <CategoryTag variant="gray">
+        <CategoryTag variant="gray" size="default">
           <div className="flex items-center gap-1">
             {icon}
             {label}

components/ui/categoryTag.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 import { Icons } from "../icons"
 
 const categoryTagVariants = cva(
-  "flex p-[6px] gap-2 rounded-[6px] inline-flex items-center",
+  "flex gap-2 rounded-[6px] inline-flex items-center",
   {
     variants: {
       variant: {