Merge branch 'main' into search-filter-func

Signed-off-by: Catherine Kiiru <[email protected]>
chaoss · Nov 18, 2024 · 4b9bf59 · 4b9bf59
2 parents 7b19b98 + 6f5d69a
commit 4b9bf59
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ProjectPage/Projects.jsx b/src/components/ProjectPage/Projects.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import ProjectCards from "../ProjectCards";
 import search_icon from "../../assets/images/Search.svg";
+import { ListFilter } from "lucide-react";
 import {
   Pagination,
   PaginationContent,
@@ -10,13 +11,15 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../ui/pagination";
+
 import FilterSortModal from "./FilterSortModal";
 import { Cross2Icon } from "@radix-ui/react-icons";
 
 const Projects = ({ data }) => {
   const [projectsData, setProjectsData] = useState(data);
   const [filteredProjects, setFilteredProjects] = useState(data);
   const [searchQuery, setSearchQuery] = useState("");
+
   const [pageNumber, setPageNumber] = useState(() => {
     // Initialize the page number using the value in local storage or default to 1
     const savedPageNumber = localStorage.getItem("currentPage");
@@ -146,7 +149,6 @@ const Projects = ({ data }) => {
 
     return pages;
   };
-
   const removeFilter = (filter) => {
     setSelectedFields((prevFields) =>
       prevFields.filter((item) => item !== filter)
@@ -167,7 +169,6 @@ const Projects = ({ data }) => {
       setFilteredProjects(projectsData);
     }
   }, [selectedFields]);
-
   return (
     <div className="bg-[#ffffe3] w-full p-5 py-10 md:p-20 lg:px-36 justify-center items-center">
       {/* title */}
@@ -271,6 +272,49 @@ const Projects = ({ data }) => {
           </p>
         )}
       </>
+          />
+        </div>
+        <div className="flex gap-2 justify-center items-center border border-[#E1E1CA] p-4 rounded-lg">
+          <div>
+            <ListFilter />
+          </div>
+          <p className="font-medium text-base">Filter</p>
+        </div>
+      </div>
+
+      {/* Cards */}
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2 py-4 justify-center ">
+        {projectsData.map((project, index) => (
+          <ProjectCards
+            key={project.id}
+            image={project.logoimagelink + "?random=" + index + 1}
+            title={project.title}
+            category={project.category}
+            description={project.description}
+            project_link={project.link}
+          />
+        ))}
+      </div>
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              className="cursor-pointer"
+              onClick={() => setPageNumber((page) => Math.max(1, page - 1))}
+            />
+          </PaginationItem>
+          {renderPagination()}
+          <PaginationItem>
+            <PaginationNext
+              className="cursor-pointer"
+              onClick={() =>
+                setPageNumber((page) => Math.min(totalPageNumber, page + 1))
+              }
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
     </div>
   );
 };