Pagination component

2024-07-15 12:36:36 -04:00
parent 3b9309e64c
commit fada26f8a3
3 changed files with 46 additions and 40 deletions
@@ -0,0 +1,32 @@
+import Link from 'next/link';
+
+const Pagination = ({ page, pageSize, totalItems }) => {
+  const totalPages = Math.ceil(totalItems / pageSize);
+  return (
+    <section className='container mx-auto flex justify-center items-center my-8'>
+      {page > 1 ? (
+        <Link
+          className='mr-2 px-2 py-1 border border-gray-300 rounded'
+          href={`/properties?page=${page - 1}`}
+        >
+          Previous
+        </Link>
+      ) : null}
+
+      <span className='mx-2'>
+        {' '}
+        Page {page} of {totalPages}
+      </span>
+
+      {page < totalPages ? (
+        <Link
+          className='ml-2 px-2 py-1 border border-gray-300 rounded'
+          href={`/properties?page=${page + 1}`}
+        >
+          Next
+        </Link>
+      ) : null}
+    </section>
+  );
+};
+export default Pagination;