avatr contain

src/components/avatar.tsx

@@ -18,6 +18,7 @@ interface AvatarProps
   radius?: string | number;
   withBorder?: boolean;
   disableFullscreen?: boolean;
+  contain?: boolean;
 }
 
 const Avatar = ({
@@ -26,6 +27,7 @@ const Avatar = ({
   radius = "100%",
   withBorder = true,
   disableFullscreen = false,
+  contain = false,
   ...props
 }: AvatarProps) => {
   const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);
@@ -67,7 +69,7 @@ const Avatar = ({
           w={size}
           styles={{
             image: {
-              objectFit: "contain",
+              objectFit: contain ? 'contain' : 'cover',
             },
           }}
           {...props}

src/features/badges/server.ts

@@ -0,0 +1,4 @@
+import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
+import { superTokensAdminFunctionMiddleware } from "@/utils/supertokens";
+import { createServerFn } from "@tanstack/react-start";
+

src/features/badges/util.ts

@@ -0,0 +1,8 @@
+/*
+
+pb.collection("team_stats_per_tournament").getFullList({
+    filter: `tournament_id = "${id}"`,
+    sort: "-wins,-total_cups_made"
+})
+
+*/

src/features/tournaments/components/profile/header.tsx

@@ -11,7 +11,7 @@ const Header = ({ tournament }: HeaderProps) => {
   return (
     <>
       <Flex h="20dvh" px='xl' w='100%' align='self-end' gap='md'>
-        <Avatar name={tournament.name} radius={0} withBorder={false} size={150} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
+        <Avatar contain name={tournament.name} radius={0} withBorder={false} size={150} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
         <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
           <Title ta='center' order={2}>{tournament.name}</Title>
         </Flex>

src/features/tournaments/components/started-tournament/header.tsx

@@ -18,6 +18,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
     <Stack px="sm" align="center" gap={0}>
       <Avatar
         name={tournament.name}
+        contain
         src={
           tournament.logo
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`

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

@@ -60,6 +60,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
               size={90}
               radius="sm"
               name={tournament.name}
+              contain
               src={
                 tournament.logo
                   ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`

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

@@ -108,6 +108,7 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
                 radius="sm"
                 size={40}
                 name={tournament.name}
+                contain
                 src={
                   tournament.logo
                     ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`

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

@@ -281,5 +281,3 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
     </Container>
   );
 });
-
-TournamentStats.displayName = 'TournamentStats';

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

@@ -19,6 +19,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
     <Stack align="center" gap={0}>
       <Avatar
         name={tournament.name}
+        contain
         src={
           tournament.logo
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`