Pagination component

_theme_files/properties.html

@@ -616,48 +616,16 @@
     </section>
 
     <!-- Pagination -->
-    <section class="container mx-auto flex justify-center my-8">
+    <section class="container mx-auto flex justify-center items-center my-8">
-      <nav
+      <a class="mr-2 px-2 py-1 border border-gray-300 rounded" href="#">
-        class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+        Previous
-        aria-label="Pagination"
+      </a>
-      >
-        <!-- Previous Button -->
-        <a
-          href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          <span class="sr-only">Previous</span>
-          <!-- You can use an icon here, for example: <i class="fas fa-chevron-left"></i> -->
-          Previous
-        </a>
 
-        <!-- Page Numbers -->
+      <span class="mx-2">Page 1 of 4</span>
-        <a
-          href="#"
-          class="bg-blue-500 text-white hover:bg-blue-600 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium"
-          >1</a
-        >
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-          >2</a
-        >
-        <a
-          href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-          >3</a
-        >
 
-        <!-- Next Button -->
+      <a class="ml-2 px-2 py-1 border border-gray-300 rounded" href="#">
-        <a
+        Next
-          href="#"
+      </a>
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
-          <span class="sr-only">Next</span>
-          <!-- You can use an icon here, for example: <i class="fas fa-chevron-right"></i> -->
-          Next
-        </a>
-      </nav>
     </section>
 
     <!-- Footer -->

app/properties/page.jsx

@@ -1,5 +1,6 @@
 import PropertyCard from '@/components/PropertyCard';
 import PropertySearchForm from '@/components/PropertySearchForm';
+import Pagination from '@/components/Pagination';
 import Property from '@/models/Property';
 import connectDB from '@/config/database';
 
@@ -29,6 +30,11 @@ const PropertiesPage = async ({ searchParams: { pageSize = 3, page = 1 } }) => {
               ))}
             </div>
           )}
+          <Pagination
+            page={parseInt(page)}
+            pageSize={parseInt(pageSize)}
+            totalItems={total}
+          />
         </div>
       </section>
     </>

components/Pagination.jsx

@@ -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;