From 0e65eac206794b4b7d72ce105320691184e9f544 Mon Sep 17 00:00:00 2001
From: tanyar09 <tatiana.romlit@gmail.com>
Date: Fri, 5 Dec 2025 12:48:39 -0500
Subject: [PATCH] feat: Add pagination controls to Search component for
 improved navigation

This commit introduces pagination functionality in the Search component, allowing users to navigate through search results more efficiently. The UI now includes "Previous" and "Next" buttons, enhancing the overall user experience. Documentation has been updated to reflect these changes.
---
 frontend/src/pages/Search.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx
index 3fb706a..3c1d80e 100644
--- a/frontend/src/pages/Search.tsx
+++ b/frontend/src/pages/Search.tsx
@@ -1240,6 +1240,39 @@ export default function Search() {
             </div>
           </div>
 
+          {/* Pagination - Top */}
+          {total > pageSize && (
+            <div className="mb-4 flex items-center justify-between border-b pb-4">
+              <div className="text-sm text-gray-600">
+                Page {page} of {Math.ceil(total / pageSize)}
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => {
+                    const newPage = Math.max(1, page - 1)
+                    setPage(newPage)
+                    performSearch(newPage)
+                  }}
+                  disabled={page === 1}
+                  className="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400"
+                >
+                  Previous
+                </button>
+                <button
+                  onClick={() => {
+                    const newPage = Math.min(Math.ceil(total / pageSize), page + 1)
+                    setPage(newPage)
+                    performSearch(newPage)
+                  }}
+                  disabled={page >= Math.ceil(total / pageSize)}
+                  className="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+
           {/* Results Table */}
           <div className="overflow-x-auto">
             <table className="w-full text-sm">