From 3541363f9fc2fd6edccbc2127e97442f7b9ffc19 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 22 Mar 2024 16:18:19 +0100
Subject: [PATCH] added dummy pagination

---
 .../Pagination/NewPaginatedList.jsx           | 60 ++++++++++++-------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/components/Pagination/NewPaginatedList.jsx b/src/components/Pagination/NewPaginatedList.jsx
index 9283b6c..ec9a057 100644
--- a/src/components/Pagination/NewPaginatedList.jsx
+++ b/src/components/Pagination/NewPaginatedList.jsx
@@ -74,27 +74,45 @@ export default function NewPaginatedList({
       {/* show prev and next button if data exist */}
       {data.length > 0 && (
         <div className="mt-10 w-full flex gap-4 justify-center items-center">
-          <button
-            onClick={handlePrev}
-            className={`w-12 h-12 rounded-full flex justify-center items-center border ${
-              currentPage == 0
-                ? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
-                : "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300"
-            } transition-all duration-500`}
-          >
-            &lt;
-          </button>
-          <button
-            onClick={handleNext}
-            className={`w-12 h-12 rounded-full flex justify-center items-center border ${
-              currentPage + numberOfSelection >= data.length
-                ? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
-                : "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300"
-            } transition-all duration-500`}
-          >
-            &gt;
-          </button>
-        </div>
+        <button
+          onClick={handlePrev}
+          className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
+            currentPage == 0
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &lt;
+        </button>
+
+        {data.length && data.map((item, index)=>{
+          if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
+            return (
+              <button
+                onClick={handleNext}
+                className={`w-12 h-12 rounded-full flex justify-center items-center border transition-all duration-300 ${
+                  currentPage != index
+                    ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
+                    : "text-slate-600 border-slate-600 dark:text-white dark:border-white pointer-events-none"
+                }`}
+              >
+                {index/itemsPerPage +1}
+              </button>
+            )
+          }
+        })}
+
+        <button
+          onClick={handleNext}
+          className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
+            currentPage + numberOfSelection >= data.length
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &gt;
+        </button>
+      </div>
       )}
     </div>
   );