refactor bracket feature

src/features/bracket/components/bracket.tsx

@@ -0,0 +1,46 @@
+import { ScrollArea, Text } from "@mantine/core";
+import BracketView from "./bracket-view";
+import { Match } from "../types";
+import useAppShellHeight from "@/hooks/use-appshell-height";
+import { BracketMaps } from "../utils/bracket-maps";
+
+interface BracketProps {
+  winners: Match[][],
+  losers?: Match[][],
+  bracketMaps: BracketMaps | null
+}
+
+const Bracket: React.FC<BracketProps> = ({ winners, losers, bracketMaps }) => {
+  const height = useAppShellHeight();
+
+  if (!bracketMaps) return <p>Data not available.</p>
+
+  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>
+        <BracketView bracket={winners} bracketMaps={bracketMaps} />
+      </div>
+      {
+        losers && <div>
+          <Text fw={600} size="md" m={16}>
+            Losers Bracket
+          </Text>
+          <BracketView bracket={losers} bracketMaps={bracketMaps} />
+        </div>
+      }
+    </ScrollArea>
+  );
+};
+
+export default Bracket;