48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { ProjectType } from "../../types";
|
|
import ProjectsSection from "./ProjectsSection";
|
|
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;
|
|
const slicedProjects = [];
|
|
|
|
for (let i = 0; i < projects.length; i += chunkSize) {
|
|
const chunk = projects.slice(i, i + chunkSize);
|
|
slicedProjects.push(chunk);
|
|
}
|
|
|
|
return slicedProjects;
|
|
}
|
|
|
|
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 pb-32">
|
|
{slicedProjects.map((pr) => (
|
|
<ProjectsSection projects={pr} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectsContainer;
|