fix team avatars

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

@@ -13,7 +13,7 @@ import {
 } from "@mantine/core";
 import { Tournament } from "@/features/tournaments/types";
 import { CrownIcon, TreeStructureIcon, InfoIcon, ListDashes } from "@phosphor-icons/react";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import ListLink from "@/components/list-link";
 import { Podium } from "./podium";
 
@@ -72,6 +72,8 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
         <Text px="md" size="lg" fw={600}>Results</Text>
         <Text px="md" c="dimmed" size="xs" fw={500}>Sorted by win percentage</Text>
         {teamStatsWithCalculations.map((stat, index) => {
+          const team = tournament.teams?.find(t => t.id === stat.team_id);
+
           return (
             <Box key={stat.id}>
               <UnstyledButton
@@ -81,7 +83,11 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
               >
                 <Group justify="space-between" align="center" w="100%">
                   <Group gap="sm" align="center">
-                    <Avatar name={stat.team_name} size={40} radius="sm" />
+                    {team ? (
+                      <TeamAvatar team={team} size={40} radius="sm" isRegional={tournament.regional} />
+                    ) : (
+                      <TeamAvatar team={{ id: stat.team_id, name: stat.team_name, players: [] } as any} size={40} radius="sm" isRegional={tournament.regional} />
+                    )}
                     <Stack gap={2}>
                       <Group gap='xs'>
                         <Text size="xs" c="dimmed">