several

src/features/bracket/components/preview.tsx

@@ -10,17 +10,22 @@ import { useEffect, useState } from "react";
 import { bracketQueries } from "../queries";
 import { useQuery } from "@tanstack/react-query";
 import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
-import { BracketData, Match, Team } from "../types";
+import { BracketData, Match } from "../types";
 import Bracket from "./bracket";
 import "./styles.module.css";
 
+interface PreviewTeam {
+  id: string;
+  name: string;
+}
+
 export const PreviewBracket: React.FC = () => {
   const [teamCount, setTeamCount] = useState(20);
-  const { data, isLoading, error } = useQuery<BracketData>(
+  const { data, isLoading, error } = useQuery(
     bracketQueries.preview(teamCount)
   );
 
-  const [teams, setTeams] = useState<Team[]>([]);
+  const [teams, setTeams] = useState<PreviewTeam[]>([]);
 
   useEffect(() => {
     setTeams(
@@ -40,7 +45,7 @@ export const PreviewBracket: React.FC = () => {
   useEffect(() => {
     if (!data || teams.length === 0) return;
 
-    const maps = createBracketMaps(data);
+    const maps = createBracketMaps(data as BracketData);
     setBracketMaps(maps);
 
     const mapBracket = (bracket: Match[][]) => {
@@ -73,8 +78,9 @@ export const PreviewBracket: React.FC = () => {
       );
     };
 
-    setSeededWinnersBracket(mapBracket(data.winners));
-    setSeededLosersBracket(mapBracket(data.losers));
+    const bracketData = data as BracketData;
+    setSeededWinnersBracket(mapBracket(bracketData.winners));
+    setSeededLosersBracket(mapBracket(bracketData.losers));
   }, [teams, data]);
 
   if (error) return <p>Error loading bracket</p>;
@@ -82,10 +88,7 @@ export const PreviewBracket: React.FC = () => {
   return (
     <Container p={0} w="100%" style={{ userSelect: "none" }}>
       <Flex w="100%" justify="space-between" align="center" h="3rem">
-        <Text fw={600} size="lg">
-          Preview Bracket (Double Elimination)
-        </Text>
-        <Group gap="sm">
+        <Group gap="sm" mx='auto'>
           <Text size="sm" c="dimmed">
             Teams:
           </Text>