toolbox: adds devtoolbox to easily manage debug components

components/devtools/Toolbox.tsx

@@ -0,0 +1,52 @@
+import { Portal } from "@/lib/portal/components";
+import { FC, PropsWithChildren, use, useEffect, useState } from "react";
+import { DevToolboxContext } from "./context";
+import { WrenchScrewdriverIcon } from "@heroicons/react/24/solid";
+import { XMarkIcon } from "@heroicons/react/16/solid";
+
+export const DevToolbox: FC = () => {
+  const { tools, shouldShowDevTools } = use(DevToolboxContext);
+  const [open, setOpen] = useState(false);
+  return shouldShowDevTools
+    ? (
+      <Portal>
+        <div className="dev-portal flex flex-col gap-2 fixed bottom-2 right-2 border rounded-lg bg-black/50">
+          {open
+            ? (
+              <div className="relative p-2">
+                <button
+                  className="p-1 absolute top-2 right-2"
+                  onClick={() => setOpen(!open)}
+                >
+                  <XMarkIcon className="w-3 h-3">
+                  </XMarkIcon>
+                </button>
+                <p className="mb-4 mr-8">Dev Toolbox</p>
+                {Object.values(tools)}
+              </div>
+            )
+            : (
+              <div>
+                <button className="p-4" onClick={() => setOpen(!open)}>
+                  <WrenchScrewdriverIcon className="w-4 h-4">
+                  </WrenchScrewdriverIcon>
+                </button>
+              </div>
+            )}
+        </div>
+      </Portal>
+    )
+    : <></>;
+};
+
+export const DevTool: FC<PropsWithChildren<{ id: string }>> = (
+  { children, id },
+) => {
+  const { addTool, removeTool } = use(DevToolboxContext);
+  useEffect(() => {
+    addTool(id, children);
+    (() => removeTool(id));
+  }, [addTool, children, id, removeTool]);
+
+  return <></>;
+};

components/devtools/context.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import {
+  createContext,
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { DevToolbox } from "./Toolbox";
+
+interface ContextProps {
+  tools: Record<string, ReactNode>;
+  addTool: (key: string, r: ReactNode) => void;
+  removeTool: (key: string) => void;
+  shouldShowDevTools: boolean;
+  setShouldShowDevTools: Dispatch<SetStateAction<boolean>>;
+}
+
+export const DevToolboxContext = createContext<ContextProps>({
+  tools: {},
+  addTool: () => {},
+  removeTool: () => {},
+  shouldShowDevTools: false,
+  setShouldShowDevTools: () => {},
+});
+
+export const DevToolboxContextProvider: FC<
+  PropsWithChildren<{ isDev: boolean }>
+> = (
+  { children, isDev },
+) => {
+  console.log(isDev);
+  const [tools, setTools] = useState<Record<string, ReactNode>>({});
+  const [shouldShowDevTools, setShouldShowDevTools] = useState(isDev);
+
+  const addTool = useCallback((key: string, r: ReactNode) => {
+    setTools((t) => ({ ...t, [key]: r }));
+  }, []);
+  const removeTool = useCallback((key: string) => {
+    setTools((t) => ({ ...t, [key]: undefined }));
+  }, []);
+
+  useEffect(() => {
+    if (localStorage.getItem("dev")) setShouldShowDevTools(true);
+  }, []);
+
+  return (
+    <DevToolboxContext.Provider
+      value={{
+        tools,
+        addTool,
+        removeTool,
+        shouldShowDevTools,
+        setShouldShowDevTools,
+      }}
+    >
+      {children}
+      <DevToolbox></DevToolbox>
+    </DevToolboxContext.Provider>
+  );
+};