regionals

src/features/bracket/components/match-slot.tsx

@@ -11,6 +11,7 @@ interface MatchSlotProps {
   seed?: number;
   cups?: number;
   isWinner?: boolean;
+  groupLabel?: string;
 }
 
 export const MatchSlot: React.FC<MatchSlotProps> = ({
@@ -19,7 +20,8 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
   team,
   seed,
   cups,
-  isWinner
+  isWinner,
+  groupLabel
 }) => (
   <Flex
     align="stretch"
@@ -34,7 +36,7 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
       <Flex align="center" gap={4} flex={1}>
         {team ? (
           <>
-            <Text 
+            <Text
               size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
               truncate
               style={{ minWidth: 0, flex: 1, lineHeight: "12px" }}
@@ -43,18 +45,22 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
             </Text>
             {isWinner && (
               <CrownIcon
-                size={14} 
+                size={14}
                 weight="fill"
-                style={{ 
+                style={{
                   color: 'gold',
                   marginLeft: '2px',
                   marginTop: '-1px',
                   filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
                   flexShrink: 0
-                }} 
+                }}
               />
             )}
           </>
+        ) : groupLabel ? (
+          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
+            {groupLabel}
+          </Text>
         ) : from ? (
           <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
             {from_loser ? "Loser" : "Winner"} of Match {from}