restarting brackets

src/features/_bracket/components/bracket-round.tsx

@@ -0,0 +1,48 @@
+import { Flex, Text } from '@mantine/core';
+import React from 'react';
+import { MatchCard } from './match-card';
+import { Match } from '../types';
+
+interface BracketRoundProps {
+  matches: Match[];
+  roundIndex: number;
+  getParentMatchOrder: (parentLid: number) => number | string;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+export const BracketRound: React.FC<BracketRoundProps> = ({
+  matches,
+  roundIndex,
+  getParentMatchOrder,
+  onAnnounce,
+}) => {
+  const isBye = (type: string) => type?.toLowerCase() === 'bye';
+
+  return (
+    <Flex direction="column" key={roundIndex} gap={24} justify="space-around">
+      {matches.map((match, matchIndex) => {
+        if (!match) return null;
+        if (isBye(match.type)) return <></>; // for spacing
+        
+        return (
+          <Flex
+            direction="row"
+            key={matchIndex}
+            align="center"
+            justify="end"
+            gap={8}
+          >
+            <Text c="dimmed" fw="bolder">
+              {match.order}
+            </Text>
+            <MatchCard
+              match={match}
+              getParentMatchOrder={getParentMatchOrder}
+              onAnnounce={onAnnounce}
+            />
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};