From 4e8e40270aec6b8f897934031613208c68793bb8 Mon Sep 17 00:00:00 2001
From: Isacco <i.sordo@papers.ch>
Date: Tue, 3 Oct 2023 13:25:59 +0200
Subject: [PATCH] fix: build issues

---
 src/components/Console.tsx    |  2 +-
 src/theme/Playground/index.js | 59 ++++++++++++++++++++---------------
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/components/Console.tsx b/src/components/Console.tsx
index bd984477..b4e22ee9 100644
--- a/src/components/Console.tsx
+++ b/src/components/Console.tsx
@@ -6,7 +6,7 @@ export type ConsoleProps = {
 };
 
 const Console = ({ snippetId }: ConsoleProps) => {
-  const [logs, setLogs] = useState([]);
+  const [logs, setLogs] = useState<string[]>([]);
 
   const setLogsHandler = (log: string) => {
     setLogs((prevLogs) => [...prevLogs, log]);
diff --git a/src/theme/Playground/index.js b/src/theme/Playground/index.js
index 0e83c068..aad11c72 100644
--- a/src/theme/Playground/index.js
+++ b/src/theme/Playground/index.js
@@ -9,7 +9,6 @@ import { usePrismTheme } from "@docusaurus/theme-common";
 
 import styles from "./styles.module.css";
 import BrowserWindow from "@site/src/components/BrowserWindow/BrowserWindow";
-import { reset } from "@site/src/Utils";
 
 function getCodeBody(code) {
   const lines = code.split("\n");
@@ -98,10 +97,7 @@ export default function Playground({ children, transformCode, ...props }) {
     setTimeout(() => setIsEditorEnabled(true));
   };
 
-  const hideHandler = async (snippetId) => {
-    if (snippetId === "reset editor") {
-      await reset();
-    }
+  const hideHandler = () => {
     setIsEditorEnabled(false);
   };
 
@@ -133,26 +129,39 @@ export default function Playground({ children, transformCode, ...props }) {
           )}
         </LiveProvider>
       </div>
-      <BrowserWindow url="https://example.beacon.docs.com">
-        <button
-          className="button button--primary margin-right--xs"
-          onClick={() => setIsEditorEnabledHandler()}
-        >
-          Run Code
-        </button>
-        <button
-          className="button button--secondary margin-right--xs"
-          onClick={async () => await hideHandler("reset editor")}
-        >
-          Reset
-        </button>
-        <button
-          className="button button--secondary"
-          onClick={async () => await hideHandler("clear console output")}
-        >
-          Clear Output
-        </button>
-      </BrowserWindow>
+      <BrowserOnly fallback={<LivePreviewLoader />}>
+        {() => {
+          const { reset } = require("../../utils");
+          const resetHandler = () => {
+            hideHandler();
+            reset();
+          };
+          return (
+            <>
+              <BrowserWindow url="https://example.beacon.docs.com">
+                <button
+                  className="button button--primary margin-right--xs"
+                  onClick={() => setIsEditorEnabledHandler()}
+                >
+                  Run Code
+                </button>
+                <button
+                  className="button button--secondary margin-right--xs"
+                  onClick={() => resetHandler()}
+                >
+                  Reset
+                </button>
+                <button
+                  className="button button--secondary"
+                  onClick={() => hideHandler("clear console output")}
+                >
+                  Clear Output
+                </button>
+              </BrowserWindow>
+            </>
+          );
+        }}
+      </BrowserOnly>
     </>
   );
 }