export default function Playground()

in website/src/theme/Playground/index.js [71:112]

• 37 lines of code
• 4 McCabe index (conditional complexity)

export default function Playground({ children, transformCode, ...props }) {
  const {
    siteConfig: { themeConfig },
  } = useDocusaurusContext();
  const {
    liveCodeBlock: { playgroundPosition },
  } = themeConfig;
  const prismTheme = usePrismTheme();
  const noInline = props.metastring?.includes("noInline") ?? false;
  return (
    <div className={styles.playgroundContainer}>
      {/* @ts-expect-error: type incompatibility with refs */}
      <LiveProvider
        code={children.replace(/\n$/, "")}
        noInline={noInline}
        /*
        H3 specific changes:
        1) JSON.stringify of the code results, with indentation
        2) `|| 'undefined'` is to work around https://github.com/facebook/docusaurus/issues/8009
        */
        transformCode={
          transformCode ||
          ((code) => `JSON.stringify(${code}(), null, 2) || 'undefined';`)
        }
        theme={prismTheme}
        {...props}
      >
        {playgroundPosition === "top" ? (
          <>
            <ResultWithHeader />
            <EditorWithHeader />
          </>
        ) : (
          <>
            <EditorWithHeader />
            <ResultWithHeader />
          </>
        )}
      </LiveProvider>
    </div>
  );
}