regional teams

src/features/matches/components/match-card.tsx

@@ -1,8 +1,8 @@
 import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
-import { CrownIcon, FootballHelmetIcon } from "@phosphor-icons/react";
+import { FootballHelmetIcon } from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import { Match } from "../types";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import EmojiBar from "@/features/reactions/components/emoji-bar";
 import { Suspense } from "react";
 import { useSheet } from "@/hooks/use-sheet";
@@ -113,32 +113,16 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
             <Group justify="space-between" align="center">
               <Group gap="sm" style={{ flex: 1 }}>
                 <Box
-                  style={{ position: "relative", cursor: "pointer" }}
+                  style={{ cursor: "pointer" }}
                   onClick={handleHomeTeamClick}
                 >
-                  <Avatar
+                  <TeamAvatar
+                    team={match.home!}
                     size={40}
-                    name={match.home?.name!}
                     radius="sm"
-                    src={
-                      match.home?.logo
-                        ? `/api/files/teams/${match.home?.id}/${match.home?.logo}`
-                        : undefined
-                    }
+                    winner={isHomeWin}
+                    isRegional={match.tournament.regional}
                   />
-                  {isHomeWin && (
-                    <Box
-                      style={{
-                        position: "absolute",
-                        top: -10,
-                        left: -4,
-                        transform: "rotate(-25deg)",
-                        color: "gold",
-                      }}
-                    >
-                      <CrownIcon size={16} weight="fill" />
-                    </Box>
-                  )}
                 </Box>
                   <Tooltip
                     label={match.home?.name!}
@@ -175,32 +159,16 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
             <Group justify="space-between" align="center">
               <Group gap="sm" style={{ flex: 1 }}>
                 <Box
-                  style={{ position: "relative", cursor: "pointer" }}
+                  style={{ cursor: "pointer" }}
                   onClick={handleAwayTeamClick}
                 >
-                  <Avatar
+                  <TeamAvatar
+                    team={match.away!}
                     size={40}
-                    name={match.away?.name!}
                     radius="sm"
-                    src={
-                      match.away?.logo
-                        ? `/api/files/teams/${match.away?.id}/${match.away?.logo}`
-                        : undefined
-                    }
+                    winner={isAwayWin}
+                    isRegional={match.tournament.regional}
                   />
-                  {isAwayWin && (
-                    <Box
-                      style={{
-                        position: "absolute",
-                        top: -10,
-                        left: -4,
-                        transform: "rotate(-25deg)",
-                        color: "gold",
-                      }}
-                    >
-                      <CrownIcon size={16} weight="fill" />
-                    </Box>
-                  )}
                 </Box>
                 <Tooltip
                   label={match.away?.name}

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

@@ -8,7 +8,7 @@ import {
   Title
 } from "@mantine/core";
 import { useTeam } from "../queries";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import SongSummary from "./team-form/song-summary";
 
 interface TeamCardProps {
@@ -46,11 +46,10 @@ const TeamCard = ({ teamId }: TeamCardProps) => {
     >
       <Stack gap={2}>
         <Group gap="md" align="center" p="xs">
-          <Avatar
-            name={team.name}
+          <TeamAvatar
+            team={team}
             size={40}
             radius="md"
-            src={team.logo ? `/api/files/teams/${team.id}/${team.logo}` : undefined}
             style={{
               backgroundColor: team.primary_color || undefined,
               color: team.accent_color || undefined,

src/features/teams/components/team-list.tsx

@@ -7,7 +7,7 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import { TeamInfo } from "@/features/teams/types";
 import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useMemo } from "react";
@@ -88,15 +88,10 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
             key={`team-list-${team.id}`}
             p="xs"
             icon={
-              <Avatar
+              <TeamAvatar
+                team={team}
                 radius="sm"
                 size={40}
-                name={`${team.name}`}
-                src={
-                  team.logo
-                    ? `/api/files/teams/${team.id}/${team.logo}`
-                    : undefined
-                }
               />
             }
             style={{ cursor: "pointer" }}

src/features/tournaments/components/edit-enrolled-teams.tsx

@@ -11,7 +11,7 @@ import { useState, useCallback, useMemo, memo } from "react";
 import { useTournament, useUnenrolledTeams } from "../queries";
 import useEnrollTeam from "../hooks/use-enroll-team";
 import useUnenrollTeam from "../hooks/use-unenroll-team";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import { Team, TeamInfo } from "@/features/teams/types";
 
 interface EditEnrolledTeamsProps {
@@ -22,9 +22,10 @@ interface TeamItemProps {
   team: TeamInfo;
   onUnenroll: (teamId: string) => void;
   disabled: boolean;
+  isRegional?: boolean;
 }
 
-const TeamItem = memo(({ team, onUnenroll, disabled }: TeamItemProps) => {
+const TeamItem = memo(({ team, onUnenroll, disabled, isRegional }: TeamItemProps) => {
   const playerNames = useMemo(
     () =>
       team.players?.map((p) => `${p.first_name} ${p.last_name}`).join(", ") ||
@@ -34,15 +35,11 @@ const TeamItem = memo(({ team, onUnenroll, disabled }: TeamItemProps) => {
 
   return (
     <Group py="xs" px="sm" w="100%" gap="sm" align="center">
-      <Avatar
+      <TeamAvatar
+        team={team}
         size={32}
         radius="sm"
-        name={team.name}
-        src={
-          team.logo
-            ? `/api/files/teams/${team.id}/${team.logo}`
-            : undefined
-        }
+        isRegional={isRegional}
       />
       <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
         <Text fw={500} truncate>
@@ -73,6 +70,8 @@ const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
   const { data: unenrolledTeams = [], isLoading: unenrolledLoading } =
     useUnenrolledTeams(tournamentId);
 
+  const isRegional = tournament?.regional;
+
   const { mutate: enrollTeam, isPending: isEnrolling } = useEnrollTeam();
   const { mutate: unenrollTeam, isPending: isUnenrolling } = useUnenrollTeam();
 
@@ -107,15 +106,11 @@ const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
     const team = option.data;
     return (
       <Group py="xs" px="sm" gap="sm" align="center">
-        <Avatar
+        <TeamAvatar
+          team={team as any}
           size={32}
           radius="sm"
-          name={team.name}
-          src={
-            team.logo
-              ? `/api/files/teams/${team.id}/${team.logo}`
-              : undefined
-          }
+          isRegional={isRegional}
         />
         <Text fw={500} truncate>
           {team.name}
@@ -174,6 +169,7 @@ const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
                 team={team}
                 onUnenroll={handleUnenrollTeam}
                 disabled={isUnenrolling}
+                isRegional={isRegional}
               />
             ))}
           </Stack>

src/features/tournaments/components/seed-tournament.tsx

@@ -13,7 +13,7 @@ import { DotsNineIcon } from "@phosphor-icons/react";
 import { useServerMutation } from "@/lib/tanstack-query/hooks/use-server-mutation";
 import { generateTournamentBracket } from "../../matches/server";
 import { TeamInfo } from "@/features/teams/types";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import { useBracketPreview } from "@/features/bracket/queries";
 import { BracketData } from "@/features/bracket/types";
 import BracketView from "@/features/bracket/components/bracket-view";
@@ -23,11 +23,13 @@ import { tournamentKeys } from "../queries";
 interface SeedTournamentProps {
   tournamentId: string;
   teams: TeamInfo[];
+  isRegional?: boolean;
 }
 
 const SeedTournament: React.FC<SeedTournamentProps> = ({
   tournamentId,
   teams,
+  isRegional,
 }) => {
   const [orderedTeams, setOrderedTeams] = useState<TeamInfo[]>(teams);
   const { data: bracketPreview } = useBracketPreview(teams.length);
@@ -171,15 +173,11 @@ const SeedTournament: React.FC<SeedTournamentProps> = ({
                               }}
                             />
 
-                            <Avatar
+                            <TeamAvatar
+                              team={team}
                               size={24}
                               radius="sm"
-                              name={team.name}
-                              src={
-                                team.logo
-                                  ? `/api/files/teams/${team.id}/${team.logo}`
-                                  : undefined
-                              }
+                              isRegional={isRegional}
                             />
 
                             <Text fw={500} size="sm" style={{ flex: 1 }}>