Fixes broken accordion ref

Fixes broken poppable ref
adds Schema page
Fixes schema creation not including game system id

lib/accordion/index.tsx

@@ -6,17 +6,21 @@ interface IProps {
   title?: ReactNode;
 }
 
-export const Accordion: FC<PropsWithChildren<IProps>> = (
-  { children, expandOnHover, expanded, title },
-) => {
+export const Accordion: FC<PropsWithChildren<IProps>> = ({
+  children,
+  expandOnHover,
+  expanded,
+  title,
+}) => {
   const [open, setOpen] = useState(false);
 
   return (
     <div
       data-expanded={open || expanded}
       data-expandonhover={expandOnHover}
-      className={(expandOnHover ? "group/hover" : "group/controlled") +
-        " group"}
+      className={
+        (expandOnHover ? "group/hover" : "group/controlled") + " group"
+      }
       onClick={() => !title && !expandOnHover && setOpen(!open)}
     >
       {!!title && (
@@ -24,9 +28,7 @@ export const Accordion: FC<PropsWithChildren<IProps>> = (
           className="flex justify-between cursor-pointer"
           onClick={() => !expandOnHover && setOpen(!open)}
         >
-          <div className="accordion-title">
-            {title}
-          </div>
+          <div className="accordion-title">{title}</div>
           <div
             className={`
               group-hover/hover:-rotate-180
@@ -41,10 +43,8 @@ export const Accordion: FC<PropsWithChildren<IProps>> = (
               scale-y-50
             `}
           >
-            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center">
-            </span>
-            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center">
-            </span>
+            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center"></span>
+            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center"></span>
           </div>
         </div>
       )}
@@ -64,15 +64,15 @@ export const AccordionContent: FC<PropsWithChildren> = ({ children }) => {
     }
   }, []);
 
-  const Child = () => (
-    <div className="absolute bottom-0 w-full" ref={updateRef}>
-      {children}
-    </div>
-  );
-
   return (
     <div className="relative overflow-hidden">
-      {<Child />}
+      <div
+        key={"accordion-content"}
+        className="absolute bottom-0 w-full"
+        ref={updateRef}
+      >
+        {children}
+      </div>
       <span
         style={{ ["--v-height" as never]: height + "px" }}
         className="w-0 block h-0 group-hover/hover:h-variable group-data-[expanded]/controlled:h-variable transition-all duration-700"

lib/poppables/components/poppable.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { FC, PropsWithChildren, ReactNode, useCallback, useState } from "react";
+import {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import { PoppableContent } from "./poppable-content";
 import { useDebounce } from "../../../hooks/useDebounce";
 
@@ -12,38 +19,45 @@ interface IProps {
   spacing?: number;
 }
 
-export const Poppable: FC<PropsWithChildren<IProps>> = (
-  { className, content, children, preferredEdge, preferredAlign, spacing },
-) => {
+export const Poppable: FC<PropsWithChildren<IProps>> = ({
+  className,
+  content,
+  children,
+  preferredEdge,
+  preferredAlign,
+  spacing,
+}) => {
   const [isHovered, setIsHovered] = useState(false);
   const closing = useDebounce(!isHovered, 1000);
   const closed = useDebounce(closing, 300);
 
-  const [ref, setRef] = useState<HTMLElement>();
+  // const [ref, setRef] = useState<HTMLElement>();
 
-  const updateRef = useCallback((node: HTMLElement) => {
-    if (!node) return;
-    setRef(node);
-  }, []);
+  // const updateRef = useCallback((node: HTMLElement) => {
+  // if (!node) return;
+  // setRef(node);
+  // }, []);
+
+  const ref = useRef(null);
 
   return (
     <>
       <span
-        ref={updateRef}
+        ref={ref}
         className={className}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
         {children}
       </span>
-      {!!ref && (
+      {!!ref.current && (
         <PoppableContent
           preferredAlign={preferredAlign}
           preferredEdge={preferredEdge}
           spacing={spacing}
           isClosing={closing}
           isClosed={closed}
-          relativeElement={ref}
+          relativeElement={ref.current}
           setHover={setIsHovered}
         >
           {content}