significant refactor

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

@@ -1,43 +1,51 @@
-import { Flex, Text } from '@mantine/core';
-import React from 'react';
-import { SeedBadge } from './seed-badge';
+import { Flex, Text } from "@mantine/core";
+import React from "react";
+import { SeedBadge } from "./seed-badge";
 
 interface MatchSlotProps {
   slot: any;
   getParentMatchOrder: (parentLid: number) => number | string;
 }
 
-export const MatchSlot: React.FC<MatchSlotProps> = ({ slot, getParentMatchOrder }) => {
+export const MatchSlot: React.FC<MatchSlotProps> = ({
+  slot,
+  getParentMatchOrder,
+}) => {
   const renderSlotContent = () => {
     if (slot?.seed) {
       return slot.team ? (
-        <Text size='xs'>{slot.team.name}</Text>
+        <Text size="xs">{slot.team.name}</Text>
       ) : (
-        <Text size='xs' c='dimmed'>Team {slot.seed}</Text>
-      );
-    }
-    
-    if (slot?.parent_lid !== null && slot?.parent_lid !== undefined) {
-      return (
-        <Text c='dimmed' size='xs'>
-          {slot.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(slot.parent_lid)}
+        <Text size="xs" c="dimmed">
+          Team {slot.seed}
         </Text>
       );
     }
-    
-    if (slot) {
-      return <Text c='dimmed' size='xs' fs='italic'>TBD</Text>;
+
+    if (slot?.parent_lid !== null && slot?.parent_lid !== undefined) {
+      return (
+        <Text c="dimmed" size="xs">
+          {slot.loser ? "Loser" : "Winner"} of Match{" "}
+          {getParentMatchOrder(slot.parent_lid)}
+        </Text>
+      );
     }
-    
+
+    if (slot) {
+      return (
+        <Text c="dimmed" size="xs" fs="italic">
+          TBD
+        </Text>
+      );
+    }
+
     return null;
   };
 
   return (
     <Flex align="stretch">
       {slot?.seed && <SeedBadge seed={slot.seed} />}
-      <div style={{ flex: 1, padding: '4px 8px' }}>
-        {renderSlotContent()}
-      </div>
+      <div style={{ flex: 1, padding: "4px 8px" }}>{renderSlotContent()}</div>
     </Flex>
   );
-};
+};