more bracket refactor

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

@@ -0,0 +1,43 @@
+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 }) => {
+  const renderSlotContent = () => {
+    if (slot?.seed) {
+      return slot.team ? (
+        <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>
+      );
+    }
+    
+    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>
+    </Flex>
+  );
+};