Merge pull request #369 from zakkiyyat/main

Create Pagination.tsx

Author: yusuftomilola

frontend/app/components/Pagination.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange }) => {
+  if (totalPages <= 1) return null;
+
+  const getPageNumbers = () => {
+    const delta = 2;
+    const pages: number[] = [];
+
+    for (let i = Math.max(1, currentPage - delta); i <= Math.min(totalPages, currentPage + delta); i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className="flex items-center justify-center space-x-2 mt-4">
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className={`px-3 py-1 rounded border text-sm ${
+          currentPage === 1
+            ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
+            : 'bg-white hover:bg-gray-100 border-gray-300 text-gray-700'
+        }`}
+      >
+        Prev
+      </button>
+
+      {getPageNumbers().map((page) => (
+        <button
+          key={page}
+          onClick={() => onPageChange(page)}
+          className={`px-3 py-1 rounded border text-sm ${
+            page === currentPage
+              ? 'bg-blue-500 text-white border-blue-500'
+              : 'bg-white hover:bg-gray-100 border-gray-300 text-gray-700'
+          }`}
+        >
+          {page}
+        </button>
+      ))}
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className={`px-3 py-1 rounded border text-sm ${
+          currentPage === totalPages
+            ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
+            : 'bg-white hover:bg-gray-100 border-gray-300 text-gray-700'
+        }`}
+      >
+        Next
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;