ui-implement prev/next navigation buttons

Signed-off-by: Tharanishwaran <your-email@example.com>

Author: Tharanishwaran

src/sections/Resources/Resources-grid/paginate.js

@@ -1,21 +1,90 @@
 import React from "react";
 import { ResourcePageWrapper } from "./resourceGrid.style";
+import { FaChevronLeft } from "@react-icons/all-files/fa/FaChevronLeft";
+import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight";
 
 const Pagination = ({ postsPerPage, totalPosts, paginate, currentPage }) => {
   const pageNumbers = [];
+  const totalPages = Math.ceil(totalPosts / postsPerPage);
 
-  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
+  for (let i = 1; i <= totalPages; i++) {
     pageNumbers.push(i);
   }
 
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      paginate(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      paginate(currentPage + 1);
+    }
+  };
+
+  const getVisiblePageNumbers = () => {
+    if (totalPages <= 5) {
+      return pageNumbers;
+    }
+
+    const visiblePages = [];
+
+    visiblePages.push(1);
+
+    if (currentPage > 3) {
+      visiblePages.push("...");
+    }
+
+    for (let i = Math.max(2, currentPage - 1); i <= Math.min(currentPage + 1, totalPages - 1); i++) {
+      visiblePages.push(i);
+    }
+
+    if (currentPage < totalPages - 2) {
+      visiblePages.push("...");
+    }
+
+    if (totalPages > 1) {
+      visiblePages.push(totalPages);
+    }
+
+    return visiblePages;
+  };
+
+  const visiblePageNumbers = getVisiblePageNumbers();
+
   return (
     <ResourcePageWrapper>
-      <div className="btn-container">
-        {pageNumbers.map(number => (
-          <button key={number} onClick={() => paginate(number)} className={(number === currentPage) ? "btn active-btn" : "btn page-btn"}>
-            {number}
-          </button>
-        ))}
+      <div className="pagination-container">
+        <button
+          onClick={handlePrevious}
+          className={`pagination-btn prev-btn ${currentPage === 1 ? "disabled-btn" : ""}`}
+          disabled={currentPage === 1}
+        >
+          <FaChevronLeft className="arrow-icon" /> Previous
+        </button>
+
+        <div className="page-numbers">
+          {visiblePageNumbers.map((item, index) => (
+            item === "..." ?
+              <span key={`ellipsis-${index}`} className="ellipsis">...</span> :
+              <button
+                key={item}
+                onClick={() => paginate(item)}
+                className={item === currentPage ? "page-btn active-btn" : "page-btn"}
+              >
+                {item}
+              </button>
+          ))}
+        </div>
+
+        <button
+          onClick={handleNext}
+          className={`pagination-btn next-btn ${currentPage === totalPages ? "disabled-btn" : ""}`}
+          disabled={currentPage === totalPages}
+        >
+          Next <FaChevronRight className="arrow-icon" />
+        </button>
       </div>
     </ResourcePageWrapper>
   );

src/sections/Resources/Resources-grid/resourceGrid.style.js

@@ -33,39 +33,120 @@ export const ResourcePageWrapper = styled.div`
             margin:0;
         }
     }
-    .btn-container {
+    
+    .pagination-container {
         display: flex;
         justify-content: center;
-        flex-wrap: wrap;
-        margin: 0 auto 2rem;
-      }
-      .btn {
-        width: 2rem;
-        height: 2rem;
+        align-items: center;
+        margin: 2rem auto;
+        max-width: 600px;
+        border-radius: 30px;
+        background-color: ${props => props.theme.grey212121ToWhite};
+        padding: 0.5rem;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .page-numbers {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .page-btn {
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 0.25rem;
         border-radius: 5px;
+        border: none;
+        background: transparent;
+        color: ${props => props.theme.whiteEightToBlack};
+        font-weight: 500;
         cursor: pointer;
-        margin: 0.5rem;
-        transition: all 0.3s linear;
-        :hover {
-            box-shadow: 0px 1px 5px 1px rgba(0, 179, 159, 0.5);
+        transition: all 0.2s ease;
+        
+        &:hover {
+            background: ${props => props.theme.secondaryColor};
+            color: white;
         }
-      }
-      .page-btn {
-        background: ${props => props.theme.grey212121ToWhite};
-        border: solid 2px;
-        border-color: ${props => props.theme.secondaryColor};
-        color: ${props => props.theme.whiteEightToBlack};
-      }
-      .active-btn {
+    }
+    
+    .active-btn {
         background: ${props => props.theme.secondaryColor};
-        border-color: transparent;
-        color: #fff;
-      }  
+        color: white;
+    }
+    
+    .pagination-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        border: none;
+        background: transparent;
+        color: ${props => props.theme.whiteEightToBlack};
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-radius: 5px;
+        
+        &:hover:not(.disabled-btn) {
+            background: ${props => props.theme.secondaryColor};
+            color: white;
+        }
+        
+        .arrow-icon {
+            font-size: 0.8rem;
+            margin: 0 0.5rem;
+        }
+    }
+    
+    .prev-btn {
+        margin-right: auto;
+    }
+    
+    .next-btn {
+        margin-left: auto;
+    }
+    
+    .disabled-btn {
+        opacity: 0.5;
+        cursor: not-allowed;
+        &:hover {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+    
+    .ellipsis {
+        width: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${props => props.theme.whiteEightToBlack};
+    }
 
     @media only screen and (max-width: 575px) {
         .resource-grid-wrapper{
             margin: 0 auto 5rem;
         }
+        
+        .pagination-container {
+            flex-wrap: wrap;
+            padding: 0.5rem 0.25rem;
+        }
+        
+        .page-btn {
+            width: 2rem;
+            height: 2rem;
+            margin: 0 0.1rem;
+        }
+        
+        .pagination-btn {
+            padding: 0.5rem;
+            font-size: 0.9rem;
+        }
     }
 
     .no-resources-page{