From ad30d154afc0e59577b273d9ce57066f4716853c Mon Sep 17 00:00:00 2001
From: Anurag Vishwakarma <anuraga2005@gmail.com>
Date: Tue, 6 Aug 2024 20:54:37 +0530
Subject: [PATCH] Added Pagination Feature in Contributors page.

---
 js/contributors.js      | 32 +++++++++++++++++++++++++++-----
 pages/contributors.html |  7 +++++++
 styles/contributors.css | 20 ++++++++++++++++++++
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/js/contributors.js b/js/contributors.js
index 9ceba3e..f46b5bb 100644
--- a/js/contributors.js
+++ b/js/contributors.js
@@ -1,12 +1,25 @@
-document.addEventListener("DOMContentLoaded", function () {
-	const contributorsContainer = document.getElementById("contributors");
+let pageNo = 1;
+
+const nextBtn = document.getElementById('nextBtn');
+const prevBtn = document.getElementById('prevBtn');
+const pageNoBox = document.getElementById('pageNoBox');
 
-	async function fetchContributors() {
+document.addEventListener("DOMContentLoaded", function () {
+	
+	async function fetchContributors(page) {
+		pageNo += page;
 		try {
 			const response = await fetch(
-				"https://api.github.com/repos/ChromeGaming/Dot-Box/contributors"
+				`https://api.github.com/repos/ChromeGaming/Dot-Box/contributors?page=${pageNo}`
 			);
 			const contributors = await response.json();
+			const contributorsContainer = document.getElementById("contributors");
+		
+			if(contributors.length == 0 || pageNo < 1) {
+				return;
+			}
+			contributorsContainer.innerHTML = "";
+			pageNoBox.innerText = pageNo;
 
 			contributors.forEach((contributor) => {
 				const contributorCard = document.createElement("a");
@@ -25,5 +38,14 @@ document.addEventListener("DOMContentLoaded", function () {
 		}
 	}
 
-	fetchContributors();
+	fetchContributors(0);
+
+	prevBtn.addEventListener('click', (e)=> {
+		e.preventDefault();
+		fetchContributors(-1);
+	  })
+	  nextBtn.addEventListener('click', (e)=> {
+		e.preventDefault();
+		fetchContributors(1);
+	  })
 });
diff --git a/pages/contributors.html b/pages/contributors.html
index e0f0f66..dac789e 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -13,6 +13,7 @@
 			href="../assets/favicon.ico"
 			type="image/x-icon"
 		/>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/contributors.css" />
 
@@ -91,6 +92,12 @@
 					id="contributors"
 					class="contributors flex flex-wrap justify-center gap-8"
 				></div>
+
+				<div class="pagination-btns">
+					<button class="btn" id="prevBtn"> <i class="bi bi-arrow-left-circle"></i> </button>
+					<button class="btn" id="pageNoBox">1</button>
+					<button class="btn" id="nextBtn"> <i class="bi bi-arrow-right-circle"></i> </button>
+				</div>
 			</div>
 		</div>
 
diff --git a/styles/contributors.css b/styles/contributors.css
index b0ed826..c380189 100644
--- a/styles/contributors.css
+++ b/styles/contributors.css
@@ -175,6 +175,26 @@ body {
 	box-shadow: 0 4px 9px rgb(51, 235, 255);
 }
 
+.pagination-btns {
+	margin: 50px 0px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+  }
+
+  .pagination-btns button.btn {
+	border-radius: 5px;
+	outline: none;
+	margin: 5px 10px;
+	border: 1px solid rgb(146, 110, 110);
+	width: 50px;
+	height: 50px;
+  }
+
+  .pagination-btns button.btn, .pagination-btns button.btn i.bi {
+	font-size: 2rem;
+  }
+
 .text-lg {
 	font-size: 1.125rem;
 }