clients page making

client/src/components/GalleryPage/ProjectsContainer.tsx

@@ -1,6 +1,9 @@
 import { ProjectType } from "../../types";
 import ProjectsSection from "./ProjectsSection";
-import { projects } from "../../consts/galleryPage";
+import { projects as mockProjects } from "../../consts/galleryPage";
+import useStore from "../../store/store";
+import { projectTabs } from "../../consts/galleryPage";
+import { useEffect, useState } from "react";
 
 function getSlicedProjects(projects: ProjectType[]) {
   const chunkSize = 5;
@@ -15,10 +18,25 @@ function getSlicedProjects(projects: ProjectType[]) {
 }
 
 const ProjectsContainer = () => {
+  const { selectedTab } = useStore();
+  const [projects, setProjects] = useState(mockProjects);
+  useEffect(() => {
+    if (selectedTab.id === projectTabs[0].id) {
+      setProjects(mockProjects);
+    } else {
+      const filteredProjects = mockProjects.filter((project) =>
+        project.tabs.some((tab) => tab.id === selectedTab.id)
+      );
+      setProjects(filteredProjects);
+    }
+
+    return () => {};
+  }, [selectedTab]);
+
   const slicedProjects = getSlicedProjects(projects);
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-5 pb-32">
       {slicedProjects.map((pr) => (
         <ProjectsSection projects={pr} />
       ))}