ported schema builder

app/game-systems/[id]/page.tsx

@@ -1,5 +1,5 @@
-import { Sticky } from "@/lib/sticky";
 import { prisma } from "@/prisma/prismaClient";
+import Link from "next/link";
 
 export default async function GameSystem(
   { params: { id } }: { params: { id: string } },
@@ -35,15 +35,25 @@ export default async function GameSystem(
         <h1>{gameSystem?.name}</h1>
       </section>
       <section>
-        <ul>
-          {gameSystem?.schemas.map((schema) => (
-            <li key={schema.id}>{schema.name}</li>
-          ))}
-        </ul>
+        <>
+          <div>
+            <Link
+              className="btn-primary mb-6 block w-min whitespace-nowrap"
+              href={`/game-systems/${id}/schema/create`}
+            >
+              Create New Schema
+            </Link>
+          </div>
+          <ul>
+            {gameSystem?.schemas.map((schema) => (
+              <li key={schema.id}>{schema.name}</li>
+            ))}
+            {!gameSystem?.schemas.length && (
+              <li>No schemas for {gameSystem?.name}</li>
+            )}
+          </ul>
+        </>
       </section>
-      <Sticky sidedness={-1}>
-        <h1>HELLO!</h1>
-      </Sticky>
     </>
   );
 }

app/game-systems/[id]/schema/[schemaId]/page.tsx

@@ -0,0 +1,21 @@
+import { Heading } from "@/components/heading";
+import { SchemaBuilder } from "@/components/schema";
+import { prisma } from "@/prisma/prismaClient";
+
+export default async function CreateSchemaForGameSystem(
+  { params }: { params: { id: string } },
+) {
+  const gs = await prisma.gameSystem.findFirst({
+    where: { id: params.id },
+    select: { name: true },
+  });
+
+  return (
+    <>
+      <Heading title={gs?.name || ""} strapline="Schemas" />
+      <section>
+        <SchemaBuilder></SchemaBuilder>
+      </section>
+    </>
+  );
+}

app/globals.css

@@ -12,6 +12,9 @@
   input {
     @apply py-2 px-4 rounded-full dark:bg-mixed-200 bg-mixed-600 placeholder:text-dark-500;
   }
+  textarea {
+    @apply dark:bg-mixed-200 bg-primary-600 rounded-md p-1;
+  }
   h1,
   h2,
   h3,
@@ -49,6 +52,9 @@
   .btn-secondary {
     @apply dark:text-primary-500 text-primary-100 py-4 px-6 font-bold text-lg;
   }
+  .btn-small {
+    @apply px-2 py-1;
+  }
   .p {
     @apply pb-1;
   }

app/layout.tsx

@@ -10,6 +10,7 @@ import {
 } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { DevToolboxContextProvider } from "@/components/devtools/context";
+import { RecoilRootClient } from "@/components/recoilRoot";
 
 const roboto = Roboto({ subsets: ["latin"], weight: "400" });
 
@@ -72,13 +73,15 @@ export default function RootLayout({
             ))}
           </ul>
         </nav>
-        <DevToolboxContextProvider
-          isDev={process.env.NODE_ENV !== "production"}
-        >
-          <main className="p-8 w-full overflow-visible">
-            {children}
-          </main>
-        </DevToolboxContextProvider>
+        <RecoilRootClient>
+          <DevToolboxContextProvider
+            isDev={process.env.NODE_ENV !== "production"}
+          >
+            <main className="p-8 w-full overflow-visible">
+              {children}
+            </main>
+          </DevToolboxContextProvider>
+        </RecoilRootClient>
         <div id="root-portal"></div>
       </body>
     </html>