more bracket work

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

@@ -1,51 +1,35 @@
 import { Flex, Text } from "@mantine/core";
 import React from "react";
 import { SeedBadge } from "./seed-badge";
+import { TeamInfo } from "@/features/teams/types";
 
 interface MatchSlotProps {
-  slot: any;
-  getParentMatchOrder: (parentLid: number) => number | string;
+  from?: number;
+  from_loser?: boolean;
+  team?: TeamInfo;
+  seed?: number;
 }
 
 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 (
+  from,
+  from_loser,
+  team,
+  seed,
+}) => (
+  <Flex align="stretch">
+    {seed && <SeedBadge seed={seed} />}
+    <Flex p="4px 8px">
+      {team ? (
+        <Text size="xs">{team.name}</Text>
+      ) : from ? (
         <Text c="dimmed" size="xs">
-          {slot.loser ? "Loser" : "Winner"} of Match{" "}
-          {getParentMatchOrder(slot.parent_lid)}
+          {from_loser ? "Loser" : "Winner"} of Match {from}
         </Text>
-      );
-    }
-
-    if (slot) {
-      return (
-        <Text c="dimmed" size="xs" fs="italic">
+      ) : (
+        <Text c="dimmed" size="xs">
           TBD
         </Text>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <Flex align="stretch">
-      {slot?.seed && <SeedBadge seed={slot.seed} />}
-      <div style={{ flex: 1, padding: "4px 8px" }}>{renderSlotContent()}</div>
+      )}
     </Flex>
-  );
-};
+  </Flex>
+);