import styles from "./Projects.module.scss"; import React, { useState } from "react"; import Head from "next/head"; import { useTranslation } from "next-i18next"; import AppContext from "../../particles/contexts/app-context"; import AppTemplate from "../../templates/app"; import Footer from "../../organisms/footer"; import Header from "../../organisms/header"; import Button from "../../atoms/button"; import ProjectCard from "../../molecules/project-card"; import Carousel from "../../containers/carousel"; const getFilteredProjects = (selectedId: any, projects: any) => { if (selectedId === "all") { return projects; } return projects.filter((project: any) => project.category_id === selectedId); }; const ProjectsPage = ({ projects, categories, appData }: any) => { const { t } = useTranslation("common"); const [selectedId, setSelectedId] = useState("all"); const newCategories = [{ id: "all", name: t("All") }, ...categories]; const filteredProjects = getFilteredProjects(selectedId, projects); return ( } footer={