Pagination component

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>
+    );
+}