Create pagination component

1 files changed, 56 insertions, 0 deletions

diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 00000000..14f2ac0c
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,56 @@
+import Link from "next/link"
+
+export default function Pagination({ pageCount, currentPage, url }) {
+  let firstPage = false;
+  let lastPage = false;
+  let dotsPrevPage = false;
+  let dotsNextPage = false;
+  return (
+    <div className="pagination">
+      {Array.from(Array(pageCount)).map((v, i) => {
+        let page = i + 1;
+        let rangePrevPage = currentPage - 2;
+        let rangeNextPage = currentPage + 2;
+        let PageComponent = <Link key={i} href={`${url}&page=${page}`} className={"pagination-item" + (page == currentPage ? " pagination-item--active " : "")}>{page}</Link>;
+        let DotsComponent = <div key={i} className="pagination-dots">...</div>;
+
+        if (pageCount == 7) {
+          return PageComponent;
+        }
+
+        if (currentPage == 1) rangeNextPage += 3;
+        if (currentPage == 2) rangeNextPage += 2;
+        if (currentPage == 3) rangeNextPage += 1;
+        if (currentPage == 4) rangePrevPage -= 1;
+        if (currentPage == pageCount) rangePrevPage -= 3;
+        if (currentPage == pageCount - 1) rangePrevPage -= 2;
+        if (currentPage == pageCount - 2) rangePrevPage -= 1;
+        if (currentPage == pageCount - 3) rangeNextPage += 1;
+
+        if (page > rangePrevPage && page < rangeNextPage) {
+          return PageComponent;
+        }
+
+        if (page == 1 && rangePrevPage >= 1 && !firstPage) {
+          firstPage = true;
+          return PageComponent;
+        }
+
+        if (page == pageCount && rangeNextPage <= pageCount && !lastPage) {
+          lastPage = true;
+          return PageComponent;
+        }
+
+        if (page > currentPage && (pageCount - currentPage) > 1 && !dotsNextPage) {
+          dotsNextPage = true;
+          return DotsComponent;
+        }
+
+        if (page < currentPage && (currentPage - 1) > 1 && !dotsPrevPage) {
+          dotsPrevPage = true;
+          return DotsComponent;
+        }
+      })}
+    </div>
+  )
+}
\ No newline at end of file