diff --git a/pages/projects/index.tsx b/pages/projects/index.tsx index 17ef85c..c4a06f4 100644 --- a/pages/projects/index.tsx +++ b/pages/projects/index.tsx @@ -14,10 +14,18 @@ const Projects = () => { const [selectedSkills, setSelectedSkills] = useState([]); const toggleSkill = (skill: string) => { - if (selectedSkills.includes(skill)) { - setSelectedSkills(selectedSkills.filter((s) => s !== skill)); + if (skill === "Main") { + setSelectedSkills((prevSkills) => + prevSkills.includes(skill) ? [] : [skill] + ); } else { - setSelectedSkills([...selectedSkills, skill]); + setSelectedSkills((prevSkills) => + prevSkills.includes("Main") + ? [skill] + : prevSkills.includes(skill) + ? prevSkills.filter((prevSkill) => prevSkill !== skill) + : [...prevSkills, skill] + ); } }; @@ -52,6 +60,12 @@ const Projects = () => {
FILTER + toggleSkill("Main")} + active={selectedSkills.includes("Main")} + > + MAIN + toggleSkill("React")} active={selectedSkills.includes("React")} @@ -81,11 +95,16 @@ const Projects = () => { {ProjectList.slice() .reverse() - .filter( - (project) => - selectedSkills.length === 0 || - selectedSkills.some((skill) => project.skills.includes(skill)) - ) + .filter((project) => { + if (selectedSkills.includes("Main")) { + return project.main; + } else { + return ( + selectedSkills.length === 0 || + selectedSkills.some((skill) => project.skills.includes(skill)) + ); + } + }) .map((project) => (