allow only one selected theme

components/project/project-filters-bar.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/state/useProjectFiltersState"
 import { useDebounce } from "react-use"
 
+import { ProjectStatusType } from "@/lib/types"
 import { cn, queryStringToObject } from "@/lib/utils"
 
 import { Icons } from "../icons"
@@ -58,12 +59,33 @@ export const ThemesButtonMapping: Record<
   },
 }
 
+export const ThemesStatusMapping: Record<
+  ProjectStatusType,
+  {
+    label: string
+    icon: any
+  }
+> = {
+  active: {
+    label: "Active",
+    icon: <Icons.hammer />,
+  },
+  archived: {
+    label: "Archived",
+    icon: <Icons.hand />,
+  },
+  inactive: {
+    label: "Inactive",
+    icon: <Icons.readme />,
+  },
+}
+
 const FilterButtons = ({
   searchQuery,
 }: {
   searchQuery?: string
 }): JSX.Element => {
-  const { toggleFilter, activeFilters } = useProjectFiltersState(
+  const { activeFilters, onSelectTheme } = useProjectFiltersState(
     (state) => state
   )
 
@@ -78,7 +100,7 @@ const FilterButtons = ({
             variant={variant}
             size="lg"
             onClick={() => {
-              toggleFilter({ tag: "themes", value: key, searchQuery })
+              onSelectTheme(key, searchQuery ?? "")
             }}
           >
             <div className="flex items-center gap-2">

components/project/project-list.tsx

@@ -42,7 +42,7 @@ export default function ProjectList() {
               />
               <div className="flex flex-col justify-between h-full gap-5 p-5 bg-white rounded-b-lg">
                 <div className="flex flex-col justify-start gap-2">
-                  <div className="flex gap-2">
+                  <div className="flex gap-2 mb-2">
                     {tags?.themes?.map((theme, index) => {
                       const { label } = ThemesButtonMapping?.[theme]
                       const icon = TagsIconMapping?.[theme]

state/useProjectFiltersState.ts

@@ -40,6 +40,7 @@ interface ProjectActionsProps {
   toggleFilter: ({ tag, value, searchQuery }: toggleFilterProps) => void
   setFilterFromQueryString: (filters: Partial<FiltersProps>) => void
   onFilterProject: (searchPattern: string) => void
+  onSelectTheme: (theme: string, searchPattern?: string) => void
 }
 
 const createURLQueryString = (params: Partial<FiltersProps>): string => {
@@ -176,6 +177,25 @@ export const useProjectFiltersState = create<
         projects: filteredProjects,
       }
     }),
+  onSelectTheme: (theme: string, searchQuery = "") => {
+    set((state: any) => {
+      const activeFilters = {
+        ...state.activeFilters,
+        themes: [theme],
+      }
+
+      const filteredProjects = filterProjects({
+        searchPattern: searchQuery ?? "",
+        activeFilters,
+      })
+
+      return {
+        ...state,
+        activeFilters,
+        projects: filteredProjects,
+      }
+    })
+  },
   onFilterProject: (searchPattern: string) => {
     set((state: any) => {
       const filteredProjects = filterProjects({