From 5c26a429e87eae4ce6cbf8de8c71f8b4b0035673 Mon Sep 17 00:00:00 2001
From: jainish koladiya <155936377+jainish2222@users.noreply.github.com>
Date: Tue, 27 May 2025 22:52:35 +0530
Subject: [PATCH] pagination page.tsx

If the number of cards is greater than 10, display "Next" and "Previous" buttons to navigate through the remaining cards in sets of 10.
---
 app/companions/page.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/app/companions/page.tsx b/app/companions/page.tsx
index c0801c4e..111da76a 100644
--- a/app/companions/page.tsx
+++ b/app/companions/page.tsx
@@ -3,13 +3,16 @@ import CompanionCard from "@/components/CompanionCard";
 import {getSubjectColor} from "@/lib/utils";
 import SearchInput from "@/components/SearchInput";
 import SubjectFilter from "@/components/SubjectFilter";
+import Link from "next/link";
 
 const CompanionsLibrary = async ({ searchParams }: SearchParams) => {
     const filters = await searchParams;
-    const subject = filters.subject ? filters.subject : '';
-    const topic = filters.topic ? filters.topic : '';
+    const subject = filters.subject ?? '';
+    const topic = filters.topic ?? '';
+    const page = parseInt(filters.page) || 1;
+    const limit = 9;
 
-    const companions = await getAllCompanions({ subject, topic });
+    const companions = await getAllCompanions({ subject, topic, page, limit });
 
     return (
         <main>
@@ -20,6 +23,7 @@ const CompanionsLibrary = async ({ searchParams }: SearchParams) => {
                     <SubjectFilter />
                 </div>
             </section>
+
             <section className="companions-grid">
                 {companions.map((companion) => (
                     <CompanionCard
@@ -29,8 +33,25 @@ const CompanionsLibrary = async ({ searchParams }: SearchParams) => {
                     />
                 ))}
             </section>
+
+            <section className="flex justify-center gap-4 mb-5">
+                {page > 1 && (
+                   <Link href={`?page=${page - 1}&subject=${subject}&topic=${topic}`} className="px-4 py-2 rounded-xl bg-[#fe5933] border border-gray-300 shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-orange-300 transition-all duration-200 relative z-10">
+                    ← Previous
+                   </Link>
+                )}
+                {companions.length === limit && (
+                    <Link
+                        href={`?page=${page + 1}&subject=${subject}&topic=${topic}`}
+                       className="px-4 py-2 rounded-xl bg-[#fe5933] border border-gray-300 shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-orange-300 transition-all duration-200 relative z-10"
+                    >
+                        Next →
+                    </Link>
+                )}
+            </section>
         </main>
-    )
+    );
 }
 
+
 export default CompanionsLibrary