forked from Nutlope/llamacoder
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode-runner-react.tsx
More file actions
83 lines (75 loc) · 2.75 KB
/
Copy pathcode-runner-react.tsx
File metadata and controls
83 lines (75 loc) · 2.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
"use client";
import {
SandpackPreview,
SandpackProvider,
useSandpack,
} from "@codesandbox/sandpack-react/unstyled";
import { CheckIcon, CopyIcon } from "lucide-react";
import { useState } from "react";
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();
const [didCopy, setDidCopy] = useState(false);
if (!sandpack.error) return null;
return (
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-white/5 text-base backdrop-blur-sm">
<div className="max-w-[400px] rounded-md bg-red-500 p-4 text-white shadow-xl shadow-black/20">
<p className="text-lg font-medium">Error</p>
<p className="mt-4 line-clamp-[10] overflow-x-auto whitespace-pre font-mono text-xs">
{sandpack.error.message}
</p>
<div className="mt-8 flex justify-between gap-4">
<button
onClick={async () => {
if (!sandpack.error) return;
setDidCopy(true);
await window.navigator.clipboard.writeText(
sandpack.error.message,
);
await new Promise((resolve) => setTimeout(resolve, 2000));
setDidCopy(false);
}}
className="rounded border-red-300 px-2.5 py-1.5 text-sm font-semibold text-red-50"
>
{didCopy ? <CheckIcon size={18} /> : <CopyIcon size={18} />}
</button>
<button
onClick={() => {
if (!sandpack.error) return;
onRequestFix(sandpack.error.message);
}}
className="rounded bg-white px-2.5 py-1.5 text-sm font-medium text-black"
>
Try to fix
</button>
</div>
</div>
</div>
);
}