From 19cb9d9df99625803909bca194c0d9f58459c4c6 Mon Sep 17 00:00:00 2001
From: Benjtalkshow <chinedubenj@gmail.com>
Date: Fri, 15 May 2026 23:30:56 +0100
Subject: [PATCH] fix(hackathons): 2-column grid and pagination on teams tab

Teams tab was rendering as a single column with no pager, so teams
past the first page were unreachable. Use the existing Pagination
component wired to the API's pagination.totalPages and switch the
grid to two columns from the lg breakpoint.
---
 .../components/tabs/contents/FindTeam.tsx     | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx b/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx
index b152c38bc..3b2569fd9 100644
--- a/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx
+++ b/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx
@@ -19,6 +19,7 @@ import {
 import TeamCard from './teams/TeamCard';
 import MyTeamView from './teams/MyTeamView';
 import { BoundlessButton } from '@/components/buttons/BoundlessButton';
+import Pagination from '@/components/ui/pagination';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -91,6 +92,7 @@ const FindTeam = () => {
   const teams = (teamsResponse?.data?.teams || []).filter(
     t => !myTeam || t.id !== myTeam.id
   );
+  const totalPages = teamsResponse?.data?.pagination?.totalPages ?? 1;
 
   const handleJoin = (team: Team) => {
     setSelectedTeam(team);
@@ -264,16 +266,23 @@ const FindTeam = () => {
               </p>
             </div>
           ) : teams.length > 0 ? (
-            <div className='grid grid-cols-1 gap-6 md:grid-cols-1'>
-              {teams.map(team => (
-                <TeamCard
-                  key={team.id}
-                  team={team}
-                  onJoin={() => handleJoin(team)}
-                  onMessageLeader={handleMessageLeader}
-                />
-              ))}
-            </div>
+            <>
+              <div className='grid grid-cols-1 gap-6 lg:grid-cols-2'>
+                {teams.map(team => (
+                  <TeamCard
+                    key={team.id}
+                    team={team}
+                    onJoin={() => handleJoin(team)}
+                    onMessageLeader={handleMessageLeader}
+                  />
+                ))}
+              </div>
+              <Pagination
+                currentPage={page}
+                totalPages={totalPages}
+                onPageChange={setPage}
+              />
+            </>
           ) : (
             <div className='flex flex-col items-center justify-center space-y-6 rounded-3xl border border-white/5 bg-[#0D0E10] py-24 text-center'>
               <div className='flex h-20 w-20 items-center justify-center rounded-full bg-white/5'>