From 8f9c5607067fa5b174bca16cfd6d786d7b3d7862 Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Sun, 18 May 2025 12:40:11 +0200
Subject: [PATCH] Pagination component

---
 app/dashboard/sites/SitesPage.tsx | 14 ++++++-------
 components/Pagination.tsx         | 35 +++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 components/Pagination.tsx

diff --git a/app/dashboard/sites/SitesPage.tsx b/app/dashboard/sites/SitesPage.tsx
index 19072ea..7846683 100644
--- a/app/dashboard/sites/SitesPage.tsx
+++ b/app/dashboard/sites/SitesPage.tsx
@@ -5,6 +5,7 @@ import AddSite from "@/components/dialogues/AddSite";
 import Sites from "@/components/cards/Sites";
 import axios from "axios";
 import { useEffect, useState } from "react";
+import Pagination from "@/components/Pagination";
 
 interface SitesPageProps {
     username: string;
@@ -67,13 +68,12 @@ export default function SitesPage({ username, name }: SitesPageProps) {
                     ))}
                 </div>
                 
-                <div className="flex justify-center pt-4">   
-                    <div className="join">
-                        <button className="join-item btn" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>«</button>
-                        <button className="join-item btn">Page {currentPage}</button>
-                        <button className="join-item btn" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(total / itemPerPage)}>»</button>
-                    </div>
-                </div>
+                <Pagination 
+                    currentPage={currentPage} 
+                    totalItems={total} 
+                    itemsPerPage={itemPerPage} 
+                    onPageChange={handlePageChange}
+                />
             </main>
         </Sidebar>
     )
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
new file mode 100644
index 0000000..cd6fb89
--- /dev/null
+++ b/components/Pagination.tsx
@@ -0,0 +1,35 @@
+export default function Pagination({
+    currentPage,
+    totalItems,
+    itemsPerPage,
+    onPageChange
+}: {
+    currentPage: number;
+    totalItems: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+}) {
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    return (
+        <div className="flex justify-center pt-4">   
+            <div className="join">
+                <button 
+                    className="join-item btn" 
+                    onClick={() => onPageChange(currentPage - 1)} 
+                    disabled={currentPage === 1}
+                >
+                    «
+                </button>
+                <button className="join-item btn">Page {currentPage}</button>
+                <button 
+                    className="join-item btn" 
+                    onClick={() => onPageChange(currentPage + 1)} 
+                    disabled={currentPage === totalPages}
+                >
+                    »
+                </button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file