game systems: game system pages, game system create

components: moved DevTool to client component

lib/portal/components/index.ts

@@ -9,20 +9,17 @@ interface IProps {
 export const Portal: FC<PropsWithChildren<IProps>> = (
   { children, className = "root-portal", el = "div" },
 ) => {
-  const [container] = useState(() => {
-    // This will be executed only on the initial render
-    // https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-    return document.createElement(el);
-  });
+  const [container, setContainer] = useState<HTMLElement>();
 
-  // todo: this smells. appending the same element?
   useEffect(() => {
+    const container = document.createElement(el);
     container.classList.add(className);
     document.body.appendChild(container);
+    setContainer(container);
     return () => {
       document.body.removeChild(container);
     };
-  }, [className, container]);
+  }, [className, el]);
 
-  return createPortal(children, container);
+  return container && createPortal(children, container);
 };