From fada26f8a387b07db2a5123cdb6507d536914e82 Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 15 Jul 2024 12:36:36 -0400
Subject: [PATCH] Pagination component

---
 _theme_files/properties.html | 48 ++++++------------------------------
 app/properties/page.jsx      |  6 +++++
 components/Pagination.jsx    | 32 ++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 40 deletions(-)
 create mode 100644 components/Pagination.jsx

diff --git a/_theme_files/properties.html b/_theme_files/properties.html
index 2ec96ab..9acfa1f 100644
--- a/_theme_files/properties.html
+++ b/_theme_files/properties.html
@@ -616,48 +616,16 @@
     </section>
 
     <!-- Pagination -->
-    <section class="container mx-auto flex justify-center my-8">
-      <nav
-        class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
-        aria-label="Pagination"
-      >
-        <!-- 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>
+    <section class="container mx-auto flex justify-center items-center my-8">
+      <a class="mr-2 px-2 py-1 border border-gray-300 rounded" href="#">
+        Previous
+      </a>
 
-        <!-- Page Numbers -->
-        <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
-        >
+      <span class="mx-2">Page 1 of 4</span>
 
-        <!-- Next Button -->
-        <a
-          href="#"
-          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>
+      <a class="ml-2 px-2 py-1 border border-gray-300 rounded" href="#">
+        Next
+      </a>
     </section>
 
     <!-- Footer -->
diff --git a/app/properties/page.jsx b/app/properties/page.jsx
index 34bd4c0..a58b447 100644
--- a/app/properties/page.jsx
+++ b/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>
     </>
diff --git a/components/Pagination.jsx b/components/Pagination.jsx
new file mode 100644
index 0000000..8baa22e
--- /dev/null
+++ b/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;