preview bracket

src/app/routes/_authed/admin/preview.tsx

@@ -1,6 +1,7 @@
-import BracketView from "@/features/bracket/components/bracket-view";
-import { useBracketPreview } from "@/features/bracket/queries";
+import BracketPreview from "@/features/bracket/components/preview";
+import { NumberInput } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 
 export const Route = createFileRoute("/_authed/admin/preview")({
   component: RouteComponent,
@@ -10,10 +11,25 @@ export const Route = createFileRoute("/_authed/admin/preview")({
       title: "Bracket Preview",
     },
     withPadding: false,
+    fullWidth: true,
   }),
 });
 
 function RouteComponent() {
-  const bracket = useBracketPreview(16);
-  return <BracketView bracket={bracket.data} />;
+  const [n, setN] = useState(16);
+  return (
+    <>
+      <NumberInput
+        min={9}
+        max={27}
+        label="Number of teams"
+        value={n}
+        onChange={(value) => setN(value as number)}
+        w={150}
+        mb={2}
+        mx="md"
+      />
+      <BracketPreview n={n} />
+    </>
+  );
 }