99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { Chat } from "@/components/interaction-panel/chat";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
import {
|
|
SandpackCodeEditor,
|
|
SandpackFileExplorer,
|
|
SandpackLayout,
|
|
SandpackProvider,
|
|
} from "@codesandbox/sandpack-react";
|
|
import { Sandpack } from "@codesandbox/sandpack-react";
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
import { useState } from "react";
|
|
|
|
export const Route = createFileRoute("/interaction-panel/$id")({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
return (
|
|
<div className="flex h-full">
|
|
<Chat />
|
|
<Sandbox />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const Sandbox = observer(() => {
|
|
const [previewState, setPreviewState] = useState<"preview" | "code">(
|
|
"preview",
|
|
);
|
|
const togglePreviewState = () => {
|
|
setPreviewState((prev) => (prev === "preview" ? "code" : "preview"));
|
|
};
|
|
|
|
const files = {
|
|
"/test.js": `const test = "content"`,
|
|
};
|
|
|
|
return (
|
|
<div className="w-[40svw] border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all">
|
|
<div className="flex h-full flex-col gap-4">
|
|
<div className="flex min-h-[42px] flex-row items-center justify-between">
|
|
<div className="flex h-full flex-row gap-0.5 rounded-lg bg-[#F5F5F5] p-0.5">
|
|
<button
|
|
type="button"
|
|
data-active={previewState === "preview"}
|
|
onClick={togglePreviewState}
|
|
className="group inline-flex cursor-pointer flex-row items-center justify-between gap-1 rounded-lg px-4 transition-all data-[active=true]:bg-[#D6D6D6]"
|
|
>
|
|
<div className="mask-[url('/icons/Preview.svg')] size-6 bg-[#939393] bg-center bg-cover transition-colors group-data-[active=true]:bg-black" />
|
|
Preview
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-active={previewState === "code"}
|
|
onClick={togglePreviewState}
|
|
className="group inline-flex cursor-pointer flex-row items-center justify-between gap-1 rounded-lg px-4 transition-all data-[active=true]:bg-[#D6D6D6]"
|
|
>
|
|
<div className="mask-[url('/icons/Code.svg')] size-6 bg-[#939393] bg-center bg-cover transition-colors group-data-[active=true]:bg-black" />
|
|
Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-active={previewState === "code"}
|
|
className="hidden w-full data-[active=true]:flex"
|
|
>
|
|
<SandpackProvider files={{}} theme="light" template="react">
|
|
<SandpackLayout>
|
|
<SandpackFileExplorer
|
|
style={{ height: "100svh", width: "30%" }}
|
|
/>
|
|
<SandpackCodeEditor
|
|
closableTabs
|
|
showTabs
|
|
style={{ height: "100svh", width: "70%" }}
|
|
/>
|
|
</SandpackLayout>
|
|
</SandpackProvider>
|
|
</div>
|
|
<div
|
|
data-active={previewState === "preview"}
|
|
className="hidden h-full w-full bg-[#F5F5F5] data-[active=true]:block"
|
|
>
|
|
<Sandpack
|
|
theme="light"
|
|
template="react"
|
|
options={{
|
|
editorWidthPercentage: 0,
|
|
editorHeight: "88.75svh",
|
|
showNavigator: true,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|