From f33a4075c9a8418715e2a954769739f6ad089005 Mon Sep 17 00:00:00 2001
From: Nnaji Benjamin <60315147+Benjtalkshow@users.noreply.github.com>
Date: Sat, 16 May 2026 00:50:36 +0100
Subject: [PATCH] fix(hackathons): single-column teams tab and primary-colored
 pager (#562)

* fix(hackathons): single-column teams tab and primary-colored pager

Revert the teams tab grid to a single column and rework the shared
Pagination component to match the icon-chevron layout used by the
organizer submissions and participants pages, styled with the primary
color.

* feat(submissions): link submission card avatars to profile pages

Wrap the individual avatar on SubmissionCard in a profile link and
forward team-member usernames to GroupAvatar so each clustered avatar
opens that user's profile in a new tab.
---
 .../components/tabs/contents/FindTeam.tsx     |   2 +-
 .../contents/submissions/SubmissionCard.tsx   |  20 +++-
 components/avatars/GroupAvatar.tsx            |  38 +++++--
 components/ui/pagination.tsx                  | 100 ++++++++----------
 4 files changed, 96 insertions(+), 64 deletions(-)

diff --git a/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx b/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx
index 3b2569fd..a279e06e 100644
--- a/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx
+++ b/app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx
@@ -267,7 +267,7 @@ const FindTeam = () => {
             </div>
           ) : teams.length > 0 ? (
             <>
-              <div className='grid grid-cols-1 gap-6 lg:grid-cols-2'>
+              <div className='grid grid-cols-1 gap-6'>
                 {teams.map(team => (
                   <TeamCard
                     key={team.id}
diff --git a/app/(landing)/hackathons/[slug]/components/tabs/contents/submissions/SubmissionCard.tsx b/app/(landing)/hackathons/[slug]/components/tabs/contents/submissions/SubmissionCard.tsx
index 26d00747..c1f18f3e 100644
--- a/app/(landing)/hackathons/[slug]/components/tabs/contents/submissions/SubmissionCard.tsx
+++ b/app/(landing)/hackathons/[slug]/components/tabs/contents/submissions/SubmissionCard.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
 import { LayoutGrid, Loader2, Pencil, Trash2 } from 'lucide-react';
@@ -142,7 +143,24 @@ const SubmissionCard = ({ submission }: SubmissionCardProps) => {
         <div className='flex items-center justify-between gap-2 border-t border-white/5 pt-5'>
           <div className='flex items-center gap-3'>
             {isTeam ? (
-              <GroupAvatar members={teamMembers.map(m => m.avatar ?? '')} />
+              <GroupAvatar
+                members={teamMembers.map(m => m.avatar ?? '')}
+                usernames={teamMembers.map(m => m.username)}
+              />
+            ) : participant?.username ? (
+              <Link
+                href={`/profile/${participant.username}`}
+                target='_blank'
+                rel='noopener noreferrer'
+                aria-label={`View @${participant.username} profile`}
+                className='hover:opacity-90'
+              >
+                <BasicAvatar
+                  image={submitterAvatar}
+                  name={submitterName}
+                  username={participant.username}
+                />
+              </Link>
             ) : (
               <BasicAvatar
                 image={submitterAvatar}
diff --git a/components/avatars/GroupAvatar.tsx b/components/avatars/GroupAvatar.tsx
index 7ba22fd8..e3d5f3fa 100644
--- a/components/avatars/GroupAvatar.tsx
+++ b/components/avatars/GroupAvatar.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import {
   Avatar,
   AvatarFallback,
@@ -8,9 +9,10 @@ import {
 
 interface GroupAvatarProps {
   members: string[];
+  usernames?: (string | undefined)[];
 }
 
-const GroupAvatar = ({ members }: GroupAvatarProps) => {
+const GroupAvatar = ({ members, usernames }: GroupAvatarProps) => {
   const showCount = members.length > 3;
   const maxVisible = showCount ? 3 : members.length;
   const visibleMembers = members.slice(0, maxVisible);
@@ -18,14 +20,32 @@ const GroupAvatar = ({ members }: GroupAvatarProps) => {
 
   return (
     <AvatarGroup>
-      {visibleMembers.map((member, index) => (
-        <Avatar key={index} className='size-8 border-none! sm:size-6'>
-          <AvatarImage src={member} alt={`Member ${index + 1}`} />
-          <AvatarFallback className='bg-[#1E2329] text-[10px] text-white'>
-            {member.slice(0, 2).toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-      ))}
+      {visibleMembers.map((member, index) => {
+        const username = usernames?.[index];
+        const avatar = (
+          <Avatar className='size-8 border-none! sm:size-6'>
+            <AvatarImage src={member} alt={`Member ${index + 1}`} />
+            <AvatarFallback className='bg-[#1E2329] text-[10px] text-white'>
+              {member.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        );
+        if (username) {
+          return (
+            <Link
+              key={index}
+              href={`/profile/${username}`}
+              target='_blank'
+              rel='noopener noreferrer'
+              aria-label={`View @${username} profile`}
+              className='hover:ring-primary/40 rounded-full transition-all hover:ring-2'
+            >
+              {avatar}
+            </Link>
+          );
+        }
+        return <div key={index}>{avatar}</div>;
+      })}
       {remainingCount > 0 && (
         <AvatarGroupCount className='bg-background text-foreground ring-border size-8 text-xs font-bold ring-2 sm:size-6 sm:text-xs'>
           +{remainingCount}
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index b127afb7..bf182b55 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { BoundlessButton } from '../buttons';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
 
 interface PaginationProps {
   currentPage: number;
@@ -18,64 +24,52 @@ const Pagination: React.FC<PaginationProps> = ({
     return null;
   }
 
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < totalPages;
+
   return (
-    <div className={`mt-6 w-full border-t border-[#2B2B2B] pt-4 ${className}`}>
-      <div className='flex items-center justify-between'>
-        <span className='text-sm text-gray-400'>
+    <div className={`flex items-center justify-end px-2 ${className}`}>
+      <div className='flex items-center space-x-6 lg:space-x-8'>
+        <div className='flex w-[100px] items-center justify-center text-sm font-medium text-white'>
           Page {currentPage} of {totalPages}
-        </span>
-
-        <div className='flex gap-2'>
-          <BoundlessButton
+        </div>
+        <div className='flex items-center space-x-2'>
+          <Button
+            size='icon'
+            className='bg-primary text-primary-foreground hover:bg-primary/90 hidden size-8 lg:flex'
+            onClick={() => onPageChange(1)}
+            disabled={!canPrev}
+          >
+            <span className='sr-only'>Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            size='icon'
+            className='bg-primary text-primary-foreground hover:bg-primary/90 size-8'
             onClick={() => onPageChange(currentPage - 1)}
-            disabled={currentPage === 1}
-            size='sm'
-            variant='outline'
-            className=''
+            disabled={!canPrev}
           >
-            Previous
-          </BoundlessButton>
-
-          {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => {
-            if (
-              page === 1 ||
-              page === totalPages ||
-              Math.abs(page - currentPage) <= 1
-            ) {
-              return (
-                <BoundlessButton
-                  key={page}
-                  onClick={() => onPageChange(page)}
-                  size='sm'
-                  variant={currentPage === page ? 'default' : 'outline'}
-                  className={
-                    currentPage === page
-                      ? 'bg-blue-600'
-                      : 'border-[#2B2B2B] text-white hover:bg-[#2B2B2B]'
-                  }
-                >
-                  {page}
-                </BoundlessButton>
-              );
-            } else if (page === currentPage - 2 || page === currentPage + 2) {
-              return (
-                <span key={page} className='px-2 text-gray-500'>
-                  ...
-                </span>
-              );
-            }
-            return null;
-          })}
-
-          <BoundlessButton
+            <span className='sr-only'>Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            size='icon'
+            className='bg-primary text-primary-foreground hover:bg-primary/90 size-8'
             onClick={() => onPageChange(currentPage + 1)}
-            disabled={currentPage === totalPages}
-            size='sm'
-            variant='outline'
-            className='border-[#2B2B2B] text-white'
+            disabled={!canNext}
+          >
+            <span className='sr-only'>Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            size='icon'
+            className='bg-primary text-primary-foreground hover:bg-primary/90 hidden size-8 lg:flex'
+            onClick={() => onPageChange(totalPages)}
+            disabled={!canNext}
           >
-            Next
-          </BoundlessButton>
+            <span className='sr-only'>Go to last page</span>
+            <ChevronsRight />
+          </Button>
         </div>
       </div>
     </div>