From cb02c310aea322a6c60f12038d607be172719ea2 Mon Sep 17 00:00:00 2001
From: Kalidou Diagne <kld.diagne@gmail.com>
Date: Thu, 7 Sep 2023 15:31:33 +0100
Subject: [PATCH 1/2] project status

---
 app/projects/[id]/page.tsx                 | 40 ++--------------------
 components/project/project-detail-tags.tsx | 18 +++++-----
 components/ui/categoryTag.tsx              |  2 +-
 3 files changed, 13 insertions(+), 47 deletions(-)

diff --git a/app/projects/[id]/page.tsx b/app/projects/[id]/page.tsx
index e82f926c..40c3f86a 100644
--- a/app/projects/[id]/page.tsx
+++ b/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"
 
 type PageProps = {
   params: { id: string }
@@ -54,38 +50,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)
diff --git a/components/project/project-detail-tags.tsx b/components/project/project-detail-tags.tsx
index 49fdc6f0..1dbbcf00 100644
--- a/components/project/project-detail-tags.tsx
+++ b/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,12 +57,14 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
         )
       })}
       <TagsWrapper label="Project status">
-        <CategoryTag variant="gray">
-          <div className="flex items-center gap-1">
-            {icon}
-            {label}
-          </div>
-        </CategoryTag>
+        <div>
+          <CategoryTag variant="gray" size="default">
+            <div className="flex items-center gap-1">
+              {icon}
+              {label}
+            </div>
+          </CategoryTag>
+        </div>
       </TagsWrapper>
     </div>
   )
diff --git a/components/ui/categoryTag.tsx b/components/ui/categoryTag.tsx
index c3b65b17..6e875183 100644
--- a/components/ui/categoryTag.tsx
+++ b/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: {

From 0377803f4ad5d25d1a988f12ca4248e5dd20d805 Mon Sep 17 00:00:00 2001
From: Kalidou Diagne <kld.diagne@gmail.com>
Date: Thu, 7 Sep 2023 15:34:10 +0100
Subject: [PATCH 2/2] remove unnecessary div

---
 components/project/project-detail-tags.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/components/project/project-detail-tags.tsx b/components/project/project-detail-tags.tsx
index 1dbbcf00..b30cdf5e 100644
--- a/components/project/project-detail-tags.tsx
+++ b/components/project/project-detail-tags.tsx
@@ -57,14 +57,12 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
         )
       })}
       <TagsWrapper label="Project status">
-        <div>
-          <CategoryTag variant="gray" size="default">
-            <div className="flex items-center gap-1">
-              {icon}
-              {label}
-            </div>
-          </CategoryTag>
-        </div>
+        <CategoryTag variant="gray" size="default">
+          <div className="flex items-center gap-1">
+            {icon}
+            {label}
+          </div>
+        </CategoryTag>
       </TagsWrapper>
     </div>
   )