enrollment polish

src/features/teams/components/regional-team-card.tsx

@@ -0,0 +1,58 @@
+import {
+  Paper,
+  Text,
+  Group,
+  Box,
+  Title
+} from "@mantine/core";
+import { useTeam } from "../queries";
+import TeamAvatar from "@/components/team-avatar";
+
+interface RegionalTeamCardProps {
+  teamId: string;
+}
+
+const RegionalTeamCard = ({ teamId }: RegionalTeamCardProps) => {
+  const { data: team, error } = useTeam(teamId);
+
+  if (error || !team) {
+    return (
+      <Paper p="sm" withBorder radius="md">
+        <Text c="red" ta="center" size="sm">
+          Failed to load team
+        </Text>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper
+      withBorder
+      radius="lg"
+      shadow="xs"
+      p="xs"
+    >
+      <Group gap="md" align="center">
+        <TeamAvatar
+          team={team}
+          size={40}
+          radius="md"
+          style={{
+            backgroundColor: team.primary_color || undefined,
+            color: team.accent_color || undefined,
+          }}
+        />
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Title order={5} lineClamp={1}>
+            {team.name}
+          </Title>
+          <Text size="sm" c="dimmed" lineClamp={1}>
+            {team.players?.map(p => `${p.first_name} ${p.last_name}`).join(', ')}
+          </Text>
+        </Box>
+      </Group>
+    </Paper>
+  );
+};
+
+export default RegionalTeamCard;

src/features/tournaments/components/upcoming-tournament/index.tsx

@@ -12,6 +12,7 @@ import EnrolledPlayersListButton from "./enrolled-players-list-button";
 import Header from "./header";
 import TeamCardSkeleton from "@/features/teams/components/team-card-skeleton";
 import TeamCard from "@/features/teams/components/team-card";
+import RegionalTeamCard from "@/features/teams/components/regional-team-card";
 import UpdateTeam from "./update-team";
 import UnenrollTeam from "./unenroll-team";
 import { useQueryClient } from "@tanstack/react-query";
@@ -99,15 +100,23 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
             {isUserEnrolled && (
               <>
                 <Suspense fallback={<TeamCardSkeleton />}>
-                  <TeamCard teamId={userTeam.id} />
+                  {tournament.regional === true ? (
+                    <RegionalTeamCard teamId={userTeam.id} />
+                  ) : (
+                    <TeamCard teamId={userTeam.id} />
+                  )}
                 </Suspense>
-                <UpdateTeam tournamentId={tournament.id} teamId={userTeam.id} />
+                {tournament.regional !== true && (
-                {isEnrollmentOpen && (
+                  <>
-                  <UnenrollTeam
+                    <UpdateTeam tournamentId={tournament.id} teamId={userTeam.id} />
-                    tournamentId={tournament.id}
+                    {isEnrollmentOpen && (
-                    teamId={userTeam.id}
+                      <UnenrollTeam
-                    onSubmit={handleSubmit}
+                        tournamentId={tournament.id}
-                  />
+                        teamId={userTeam.id}
+                        onSubmit={handleSubmit}
+                      />
+                    )}
+                  </>
                 )}
               </>
             )}
@@ -141,7 +150,11 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
           disabled
         />
         {tournament.regional === true ? (
-          <EnrolledPlayersListButton tournamentId={tournament.id} />
+          (tournament.teams && tournament.teams.length > 0) ? (
+            <TeamListButton teams={tournament.teams} />
+          ) : (
+            <EnrolledPlayersListButton tournamentId={tournament.id} />
+          )
         ) : (
           <TeamListButton teams={tournament.teams || []} />
         )}