From b97fe6641b7fb0a6094b9fa1fe2082c4761b5eec Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Sat, 27 Aug 2022 21:18:30 +0400
Subject: [PATCH 1/8] added error boundary to playground

---
 .../src/theme-live-codeblock.d.ts             | 10 +++++
 .../src/theme/Playground/index.tsx            | 45 +++++++++++++++++--
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
index b4dd299705cd..0e9d1ba5a130 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
+++ b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -17,6 +17,7 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/Playground' {
+  import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
   import type {LiveProviderProps} from 'react-live';
 
@@ -25,6 +26,15 @@ declare module '@theme/Playground' {
   export interface Props extends CodeBlockProps, LiveProviderProps {
     children: string;
   }
+
+  export interface BoundaryProps {
+    children: ReactNode;
+  }
+
+  export interface BoundaryState {
+    error: null | Error;
+  }
+
   export default function Playground(props: LiveProviderProps): JSX.Element;
 }
 
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index 6353159ba2e1..35e96aa84750 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -14,11 +14,46 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
 
-import type {Props} from '@theme/Playground';
+import type {Props, BoundaryProps, BoundaryState} from '@theme/Playground';
 import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
 import styles from './styles.module.css';
 
+class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
+  constructor(props: BoundaryProps) {
+    super(props);
+    this.state = {error: null};
+  }
+
+  override componentDidCatch(error: Error) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error,
+    });
+    // You can also log error messages to an error reporting service here
+  }
+
+  override render() {
+    if (this.state.error) {
+      // Error path
+      return (
+        <div>
+          <Translate
+            id="theme.Playground.error"
+            description="The error label of the live codeblocks">
+            Something went wrong.
+          </Translate>
+          <details style={{whiteSpace: 'pre-wrap'}}>
+            {this.state.error?.toString()}
+          </details>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}
+
 function Header({children}: {children: React.ReactNode}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
@@ -107,13 +142,17 @@ export default function Playground({
         {...props}>
         {playgroundPosition === 'top' ? (
           <>
-            <ResultWithHeader />
+            <ErrorBoundary>
+              <ResultWithHeader />
+            </ErrorBoundary>
             <EditorWithHeader />
           </>
         ) : (
           <>
             <EditorWithHeader />
-            <ResultWithHeader />
+            <ErrorBoundary>
+              <ResultWithHeader />
+            </ErrorBoundary>
           </>
         )}
       </LiveProvider>

From 9c553c3eb38bd78ae9685097fe73ea74294a263c Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Sat, 27 Aug 2022 23:11:00 +0400
Subject: [PATCH 2/8] using error boundary from core

---
 .../src/theme-live-codeblock.d.ts             |  9 ---
 .../src/theme/Playground/index.tsx            | 58 +++++++------------
 2 files changed, 20 insertions(+), 47 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
index 0e9d1ba5a130..a7d4946854d0 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
+++ b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -17,7 +17,6 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/Playground' {
-  import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
   import type {LiveProviderProps} from 'react-live';
 
@@ -27,14 +26,6 @@ declare module '@theme/Playground' {
     children: string;
   }
 
-  export interface BoundaryProps {
-    children: ReactNode;
-  }
-
-  export interface BoundaryState {
-    error: null | Error;
-  }
-
   export default function Playground(props: LiveProviderProps): JSX.Element;
 }
 
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index 35e96aa84750..df6aabe98e87 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -13,47 +13,14 @@ import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
 
-import type {Props, BoundaryProps, BoundaryState} from '@theme/Playground';
+import type {Props} from '@theme/Playground';
+import type {Props as ErrorProps} from '@theme/Error';
 import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
 import styles from './styles.module.css';
 
-class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
-  constructor(props: BoundaryProps) {
-    super(props);
-    this.state = {error: null};
-  }
-
-  override componentDidCatch(error: Error) {
-    // Catch errors in any components below and re-render with error message
-    this.setState({
-      error,
-    });
-    // You can also log error messages to an error reporting service here
-  }
-
-  override render() {
-    if (this.state.error) {
-      // Error path
-      return (
-        <div>
-          <Translate
-            id="theme.Playground.error"
-            description="The error label of the live codeblocks">
-            Something went wrong.
-          </Translate>
-          <details style={{whiteSpace: 'pre-wrap'}}>
-            {this.state.error?.toString()}
-          </details>
-        </div>
-      );
-    }
-    // Normally, just render children
-    return this.props.children;
-  }
-}
-
 function Header({children}: {children: React.ReactNode}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
@@ -116,6 +83,21 @@ function EditorWithHeader() {
   );
 }
 
+function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
+  return (
+    <div>
+      <p>{error.message}</p>
+      <button type="button" onClick={tryAgain}>
+        <Translate
+          id="theme.Playground.retry.button"
+          description="The label of the try again button">
+          Try Again!
+        </Translate>
+      </button>
+    </div>
+  );
+}
+
 export default function Playground({
   children,
   transformCode,
@@ -142,7 +124,7 @@ export default function Playground({
         {...props}>
         {playgroundPosition === 'top' ? (
           <>
-            <ErrorBoundary>
+            <ErrorBoundary fallback={ErrorFallback}>
               <ResultWithHeader />
             </ErrorBoundary>
             <EditorWithHeader />
@@ -150,7 +132,7 @@ export default function Playground({
         ) : (
           <>
             <EditorWithHeader />
-            <ErrorBoundary>
+            <ErrorBoundary fallback={ErrorFallback}>
               <ResultWithHeader />
             </ErrorBoundary>
           </>

From ed6c9e0a3c622aadc9aa160e78df46d324d1762a Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Sat, 27 Aug 2022 23:13:46 +0400
Subject: [PATCH 3/8] undo changes

---
 .../src/theme-live-codeblock.d.ts                                | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
index a7d4946854d0..b4dd299705cd 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
+++ b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -25,7 +25,6 @@ declare module '@theme/Playground' {
   export interface Props extends CodeBlockProps, LiveProviderProps {
     children: string;
   }
-
   export default function Playground(props: LiveProviderProps): JSX.Element;
 }
 

From 7606bb2273f6b0281af0ee28cb311b45fe4d9f5d Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Sat, 27 Aug 2022 23:21:07 +0400
Subject: [PATCH 4/8] removed id and description from button label

---
 .../src/theme/Playground/index.tsx                          | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index df6aabe98e87..c7ee0aa3674c 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -88,11 +88,7 @@ function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
     <div>
       <p>{error.message}</p>
       <button type="button" onClick={tryAgain}>
-        <Translate
-          id="theme.Playground.retry.button"
-          description="The label of the try again button">
-          Try Again!
-        </Translate>
+        <Translate>Try Again!</Translate>
       </button>
     </div>
   );

From d32c495b5fba2ed13108144ed557aabac7fd128c Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Thu, 1 Sep 2022 15:16:54 +0400
Subject: [PATCH 5/8] result header for error fallback

---
 .../src/theme/Playground/index.tsx            | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index c7ee0aa3674c..48d2efa9cc28 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -83,14 +83,27 @@ function EditorWithHeader() {
   );
 }
 
-function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
+function ErrorFallbackWithHeader({error, tryAgain}: ErrorProps): JSX.Element {
   return (
-    <div>
-      <p>{error.message}</p>
-      <button type="button" onClick={tryAgain}>
-        <Translate>Try Again!</Translate>
-      </button>
-    </div>
+    <>
+      <Header>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks">
+          Result
+        </Translate>
+      </Header>
+      <div className={styles.playgroundPreview}>
+        <p>{error.message}</p>
+        <button type="button" onClick={tryAgain}>
+          <Translate
+            id="theme.ErrorPageContent.tryAgain"
+            description="The try again label of the error fallback">
+            Try Again!
+          </Translate>
+        </button>
+      </div>
+    </>
   );
 }
 
@@ -120,7 +133,7 @@ export default function Playground({
         {...props}>
         {playgroundPosition === 'top' ? (
           <>
-            <ErrorBoundary fallback={ErrorFallback}>
+            <ErrorBoundary fallback={ErrorFallbackWithHeader}>
               <ResultWithHeader />
             </ErrorBoundary>
             <EditorWithHeader />
@@ -128,7 +141,7 @@ export default function Playground({
         ) : (
           <>
             <EditorWithHeader />
-            <ErrorBoundary fallback={ErrorFallback}>
+            <ErrorBoundary fallback={ErrorFallbackWithHeader}>
               <ResultWithHeader />
             </ErrorBoundary>
           </>

From 96c19420e4eb8ce569e46390df1eaa0dc9590864 Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Thu, 1 Sep 2022 15:40:05 +0400
Subject: [PATCH 6/8] duplication fix

---
 .../src/theme/Playground/index.tsx            | 35 +++++++------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index 48d2efa9cc28..c9aa6d55e017 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -46,7 +46,9 @@ function ResultWithHeader() {
         <BrowserOnly fallback={<LivePreviewLoader />}>
           {() => (
             <>
-              <LivePreview />
+              <ErrorBoundary fallback={ErrorFallback}>
+                <LivePreview />
+              </ErrorBoundary>
               <LiveError />
             </>
           )}
@@ -83,26 +85,17 @@ function EditorWithHeader() {
   );
 }
 
-function ErrorFallbackWithHeader({error, tryAgain}: ErrorProps): JSX.Element {
+function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
   return (
     <>
-      <Header>
+      <p>{error.message}</p>
+      <button type="button" onClick={tryAgain}>
         <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
+          id="theme.ErrorPageContent.tryAgain"
+          description="The try again label of the error fallback">
+          Try Again!
         </Translate>
-      </Header>
-      <div className={styles.playgroundPreview}>
-        <p>{error.message}</p>
-        <button type="button" onClick={tryAgain}>
-          <Translate
-            id="theme.ErrorPageContent.tryAgain"
-            description="The try again label of the error fallback">
-            Try Again!
-          </Translate>
-        </button>
-      </div>
+      </button>
     </>
   );
 }
@@ -133,17 +126,13 @@ export default function Playground({
         {...props}>
         {playgroundPosition === 'top' ? (
           <>
-            <ErrorBoundary fallback={ErrorFallbackWithHeader}>
-              <ResultWithHeader />
-            </ErrorBoundary>
+            <ResultWithHeader />
             <EditorWithHeader />
           </>
         ) : (
           <>
             <EditorWithHeader />
-            <ErrorBoundary fallback={ErrorFallbackWithHeader}>
-              <ResultWithHeader />
-            </ErrorBoundary>
+            <ResultWithHeader />
           </>
         )}
       </LiveProvider>

From c08c7112914151dac85e68f3c986dc1bae493a36 Mon Sep 17 00:00:00 2001
From: Rashid <itsfreak69@gmail.com>
Date: Fri, 2 Sep 2022 16:00:02 +0400
Subject: [PATCH 7/8] error boundary padding

---
 .../src/theme/Playground/index.tsx                            | 4 ++--
 .../src/theme/Playground/styles.module.css                    | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index c9aa6d55e017..01912fd14b8b 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -87,7 +87,7 @@ function EditorWithHeader() {
 
 function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
   return (
-    <>
+    <div className={styles.errorFallback}>
       <p>{error.message}</p>
       <button type="button" onClick={tryAgain}>
         <Translate
@@ -96,7 +96,7 @@ function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
           Try Again!
         </Translate>
       </button>
-    </>
+    </div>
   );
 }
 
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
index f3298c779eb0..a823576a0d3c 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
@@ -38,3 +38,7 @@
   padding: 1rem;
   background-color: var(--ifm-pre-background);
 }
+
+.errorFallback {
+  padding: 0.55rem;
+}

From fd54f123fd2893ef017b0078028982895002d780 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 13 Oct 2022 17:36:12 +0200
Subject: [PATCH 8/8] improve tryAgain button integration

---
 .../src/theme/ErrorPageContent.tsx            |  9 +--
 packages/docusaurus-theme-common/src/index.ts |  2 +
 .../src/utils/errorBoundaryUtils.tsx          | 23 ++++++++
 .../src/theme/Playground/index.tsx            | 57 ++++++++++---------
 4 files changed, 58 insertions(+), 33 deletions(-)
 create mode 100644 packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx

diff --git a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
index 9a6478126045..a2664859ed20 100644
--- a/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ErrorPageContent.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
+import {ErrorBoundaryTryAgainButton} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Error';
 
 export default function ErrorPageContent({
@@ -26,13 +27,7 @@ export default function ErrorPageContent({
           </h1>
           <p>{error.message}</p>
           <div>
-            <button type="button" onClick={tryAgain}>
-              <Translate
-                id="theme.ErrorPageContent.tryAgain"
-                description="The label of the button to try again when the page crashed">
-                Try again
-              </Translate>
-            </button>
+            <ErrorBoundaryTryAgainButton onClick={tryAgain} />
           </div>
         </div>
       </div>
diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
index 7df15c4516df..d282c1d85316 100644
--- a/packages/docusaurus-theme-common/src/index.ts
+++ b/packages/docusaurus-theme-common/src/index.ts
@@ -80,3 +80,5 @@ export {usePrismTheme} from './hooks/usePrismTheme';
 export {useDocsPreferredVersion} from './contexts/docsPreferredVersion';
 
 export {processAdmonitionProps} from './utils/admonitionUtils';
+
+export {ErrorBoundaryTryAgainButton} from './utils/errorBoundaryUtils';
diff --git a/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx
new file mode 100644
index 000000000000..df1a5277d984
--- /dev/null
+++ b/packages/docusaurus-theme-common/src/utils/errorBoundaryUtils.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ComponentProps} from 'react';
+import Translate from '@docusaurus/Translate';
+
+export function ErrorBoundaryTryAgainButton(
+  props: ComponentProps<'button'>,
+): JSX.Element {
+  return (
+    <button type="button" {...props}>
+      <Translate
+        id="theme.ErrorPageContent.tryAgain"
+        description="The label of the button to try again rendering when the React error boundary captures an error">
+        Try again
+      </Translate>
+    </button>
+  );
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index 01912fd14b8b..a331aa70394a 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -12,7 +12,10 @@ import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import {usePrismTheme} from '@docusaurus/theme-common';
+import {
+  ErrorBoundaryTryAgainButton,
+  usePrismTheme,
+} from '@docusaurus/theme-common';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 
 import type {Props} from '@theme/Playground';
@@ -31,6 +34,32 @@ function LivePreviewLoader() {
   return <div>Loading...</div>;
 }
 
+function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
+  return (
+    <div className={styles.errorFallback}>
+      <p>{error.message}</p>
+      <ErrorBoundaryTryAgainButton onClick={tryAgain} />
+    </div>
+  );
+}
+
+function Preview() {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<LivePreviewLoader />}>
+      {() => (
+        <>
+          <ErrorBoundary fallback={(params) => <ErrorFallback {...params} />}>
+            <LivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+
 function ResultWithHeader() {
   return (
     <>
@@ -43,16 +72,7 @@ function ResultWithHeader() {
       </Header>
       {/* https://github.com/facebook/docusaurus/issues/5747 */}
       <div className={styles.playgroundPreview}>
-        <BrowserOnly fallback={<LivePreviewLoader />}>
-          {() => (
-            <>
-              <ErrorBoundary fallback={ErrorFallback}>
-                <LivePreview />
-              </ErrorBoundary>
-              <LiveError />
-            </>
-          )}
-        </BrowserOnly>
+        <Preview />
       </div>
     </>
   );
@@ -85,21 +105,6 @@ function EditorWithHeader() {
   );
 }
 
-function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
-  return (
-    <div className={styles.errorFallback}>
-      <p>{error.message}</p>
-      <button type="button" onClick={tryAgain}>
-        <Translate
-          id="theme.ErrorPageContent.tryAgain"
-          description="The try again label of the error fallback">
-          Try Again!
-        </Translate>
-      </button>
-    </div>
-  );
-}
-
 export default function Playground({
   children,
   transformCode,