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} />
+    </>
+  );
 }

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

@@ -20,7 +20,7 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, onAnnounce }) => {
   }, [bracket.winners, bracket.losers]);
 
   return <ScrollArea
-      h={`calc(${height} - 4rem)`}
+      h={`calc(${height})`}
       className="bracket-container"
       style={{
         backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,

src/features/bracket/components/preview.tsx

@@ -0,0 +1,14 @@
+import { useBracketPreview } from "../queries";
+import BracketView from "./bracket-view";
+
+interface BracketPreviewProps {
+  n: number;
+}
+
+const BracketPreview: React.FC<BracketPreviewProps> = ({ n }) => {
+  const { data: bracket } = useBracketPreview(n);
+
+  return <BracketView bracket={bracket} />
+};
+
+export default BracketPreview;

src/hooks/use-appshell-height.ts

@@ -9,10 +9,10 @@ const useAppShellHeight = () => {
   const height = useMemo(() => {
     const appShellBottomPadding = isMobile ? "70px" : "0px";
     const pageBottomPadding = "20px";
-    const mobileNavbar = isMobile && !header.collapsed ? "4rem" : "0px";
+    // const mobileNavbar = isMobile && !header.collapsed ? "4rem" : "0px";
     const pullablePadding = "1.285rem";
 
-    return `calc(100dvh - var(--app-shell-header-height, 0px) - ${mobileNavbar} - ${pullablePadding} - ${appShellBottomPadding} - ${pageBottomPadding})`;
+    return `calc(100dvh - var(--app-shell-header-height, 0px) - ${pullablePadding} - ${appShellBottomPadding} - ${pageBottomPadding})`;
   }, [isMobile, header.collapsed]);
 
   return height;