Function ReactCodeRunner

components/code-runner-react.tsx:12–37

({
  files,
  onRequestFix,
}: {
  files: Array<{ path: string; content: string }>;
  onRequestFix?: (e: string) => void;
})

import { getSandpackConfig } from "@/lib/sandpack-config";

export default function ReactCodeRunner({
  files,
  onRequestFix,
}: {
  files: Array<{ path: string; content: string }>;
  onRequestFix?: (e: string) => void;
}) {
  const filesKey = files.map((f) => f.path + f.content).join("");
  return (
    <SandpackProvider
      key={filesKey}
      className="relative h-full w-full [&_.sp-preview-container]:flex [&_.sp-preview-container]:h-full [&_.sp-preview-container]:w-full [&_.sp-preview-container]:grow [&_.sp-preview-container]:flex-col [&_.sp-preview-container]:justify-center [&_.sp-preview-iframe]:grow"
      {...getSandpackConfig(files)}
    >
      <SandpackPreview
        showNavigator={false}
        showOpenInCodeSandbox={false}
        showRefreshButton={false}
        showRestartButton={false}
        showOpenNewtab={false}
        className="h-full w-full"
      />
      {onRequestFix && <ErrorMessage onRequestFix={onRequestFix} />}
    </SandpackProvider>
  );
}

function ErrorMessage({ onRequestFix }: { onRequestFix: (e: string) => void }) {
  const { sandpack } = useSandpack();