From 1bafecf0ffea72cf7f27d476816bfee741d5426b Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 6 Aug 2025 00:03:11 +0530
Subject: [PATCH] created new custome pagination component

---
 src/components/common/Pagination.jsx | 84 ++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/components/common/Pagination.jsx

diff --git a/src/components/common/Pagination.jsx b/src/components/common/Pagination.jsx
new file mode 100644
index 00000000..5274eddc
--- /dev/null
+++ b/src/components/common/Pagination.jsx
@@ -0,0 +1,84 @@
+import React from "react";
+
+const getPaginationRange = (currentPage, totalPages, delta = 1) => {
+  const range = [];
+  const rangeWithDots = [];
+  let l;
+
+  for (let i = 1; i <= totalPages; i++) {
+    if (
+      i === 1 ||
+      i === totalPages ||
+      (i >= currentPage - delta && i <= currentPage + delta)
+    ) {
+      range.push(i);
+    }
+  }
+
+  for (let i of range) {
+    if (l) {
+      if (i - l === 2) {
+        rangeWithDots.push(l + 1);
+      } else if (i - l !== 1) {
+        rangeWithDots.push("...");
+      }
+    }
+    rangeWithDots.push(i);
+    l = i;
+  }
+
+  return rangeWithDots;
+};
+
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  if (totalPages <= 1) return null;
+
+  const paginationRange = getPaginationRange(currentPage, totalPages);
+
+  return (
+    <nav aria-label="Page navigation">
+      <ul className="pagination pagination-sm justify-content-end py-1 mx-1">
+        <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+          <button
+            className="page-link btn-xs"
+            onClick={() => onPageChange(currentPage - 1)}
+          >
+            &laquo;
+          </button>
+        </li>
+
+        {paginationRange.map((page, index) => (
+          <li
+            key={index}
+            className={`page-item ${
+              page === currentPage ? "active" : ""
+            } ${page === "..." ? "disabled" : ""}`}
+          >
+            {page === "..." ? (
+              <span className="page-link">…</span>
+            ) : (
+              <button className="page-link" onClick={() => onPageChange(page)}>
+                {page}
+              </button>
+            )}
+          </li>
+        ))}
+
+        <li
+          className={`page-item ${
+            currentPage === totalPages ? "disabled" : ""
+          }`}
+        >
+          <button
+            className="page-link"
+            onClick={() => onPageChange(currentPage + 1)}
+          >
+            &raquo;
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Pagination;