more bracket work

src/features/bracket/components/bracket-view.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useMemo } from "react";
+import { Text, ScrollArea } from "@mantine/core";
+import { MatchCard } from "./match-card";
+import { BracketData } from "../types";
+import { Bracket } from "./bracket";
+import useAppShellHeight from "@/hooks/use-appshell-height";
+
+interface BracketViewProps {
+  bracket: BracketData;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+const BracketView: React.FC<BracketViewProps> = ({ bracket, onAnnounce }) => {
+  const height = useAppShellHeight();
+  const orders = useMemo(() => {
+    const map: Record<number, number> = {};
+    bracket.winners.flat().forEach(match => map[match.lid] = match.order);
+    bracket.losers.flat().forEach(match => map[match.lid] = match.order);
+    return map;
+  }, [bracket.winners, bracket.losers]);
+
+  return <ScrollArea
+      h={`calc(${height} - 4rem)`}
+      className="bracket-container"
+      style={{
+        backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
+        backgroundSize: "16px 16px",
+        backgroundPosition: "0 0, 8px 8px",
+      }}
+    >
+      <div>
+        <Text fw={600} size="md" m={16}>
+          Winners Bracket
+        </Text>
+        <Bracket rounds={bracket.winners} orders={orders} onAnnounce={onAnnounce} />
+      </div>
+      {bracket.losers && (
+        <div>
+          <Text fw={600} size="md" m={16}>
+            Losers Bracket
+          </Text>
+        <Bracket rounds={bracket.losers} orders={orders} onAnnounce={onAnnounce} />
+        </div>
+      )}
+    </ScrollArea>
+};
+
+export default BracketView;