upd

src/components/ProjectSelect.tsx

@@ -4,16 +4,20 @@ import { useEffect, useState } from "react";
 import Project from "../types/Project";
 import Select from "./ui/Select";
 
-function ProjectSelect({
+function ProjectSelect<T extends boolean = false>({
   projects,
   onSelect,
   defaultProject,
+  withAll,
 }: {
   projects: Project[];
-  onSelect: (project: Project) => void;
-  defaultProject: Project;
+  onSelect: (project: Project | null) => void;
+  defaultProject: T extends false ? Project : null;
+  withAll?: T;
 }) {
-  const [selectedProject, setSelectedProject] = useState(defaultProject);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(
+    defaultProject
+  );
 
   useEffect(() => setSelectedProject(defaultProject), [defaultProject]);
 
@@ -22,12 +26,23 @@ function ProjectSelect({
   return (
     <>
       <div className="flex 2xl:gap-[0.556vw] gap-2 max-md:hidden">
+        {withAll && (
+          <div
+            className={clsx(
+              "2xl:rounded-[2.778vw] rounded-[40px] 2xl:py-[0.972vw] 2xl:px-[1.389vw] p-1 flex items-center 2xl:gap-[0.556vw] gap-2 text-s 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer",
+              !selectedProject ? "ring-[#00BED7]" : "ring-[#E2E2DC]"
+            )}
+            onClick={() => setSelectedProject(null)}
+          >
+            All Projects
+          </div>
+        )}
         {projects.map((project) => (
           <div
             key={project.title}
             className={clsx(
               "2xl:rounded-[2.778vw] rounded-[40px] 2xl:p-[0.278vw] p-1 flex items-center 2xl:gap-[0.556vw] gap-2 text-s 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer",
-              project.title === selectedProject.title
+              selectedProject && project.title === selectedProject.title
                 ? "ring-[#00BED7]"
                 : "ring-[#E2E2DC]"
             )}
@@ -41,7 +56,9 @@ function ProjectSelect({
             <p
               className={clsx(
                 "2xl:mr-[1.111vw] mr-6",
-                selectedProject.title !== project.title && "text-[#0D1922]/70"
+                selectedProject &&
+                  selectedProject.title !== project.title &&
+                  "text-[#0D1922]/70"
               )}
             >
               {project.title}
@@ -49,7 +66,6 @@ function ProjectSelect({
           </div>
         ))}
       </div>
-
       <Select
         options={projects.map((project) => project.title)}
         onSelect={(option) =>
@@ -58,7 +74,7 @@ function ProjectSelect({
               defaultProject
           )
         }
-        defaultOption={defaultProject.title}
+        defaultOption={defaultProject ? defaultProject.title : "All"}
         className="md:hidden"
       />
     </>