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.

Author: Benjtalkshow

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}

components/avatars/GroupAvatar.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import {
   Avatar,
   AvatarFallback,
@@ -8,24 +9,43 @@ 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);
   const remainingCount = members.length - maxVisible;
 
   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}