ai-deployer/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement code changes to enhance functionality and improve performance

Browse Source
This commit is contained in:
RND332
2025-07-20 21:46:10 +03:00
parent fd9f991383
commit 46e9adca05
4 changed files with 39 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/routes/interaction-panel/$id.tsx
View File

@@ -2,13 +2,11 @@ import { Chat } from "@/components/interaction-panel/chat";
import { createFileRoute } from "@tanstack/react-router";
import {
SandpackCodeEditor,
SandpackCodeViewer,
SandpackFileExplorer,
SandpackLayout,
SandpackPreview,
SandpackProvider,
} from "@codesandbox/sandpack-react";
import { useAccountStore } from "@/contexts/AccountContext";
import { Sandpack } from "@codesandbox/sandpack-react";
import { observer } from "mobx-react-lite";
import { useState } from "react";
@@ -27,7 +25,6 @@ function RouteComponent() {
}
const Sandbox = observer(() => {
const { isSandboxOpen } = useAccountStore();
const [previewState, setPreviewState] = useState<"preview" | "code">(
"preview",
);
@@ -40,10 +37,7 @@ const Sandbox = observer(() => {
};
return (
<div
data-open={isSandboxOpen}
className="w-0 border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all data-[open=true]:w-[40svw]"
>
<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">
@@ -67,27 +61,37 @@ const Sandbox = observer(() => {
</button>
</div>
</div>
<SandpackProvider files={{}} theme="light" template="react">
<SandpackLayout>
<div
data-active={previewState === "code"}
className="hidden w-full data-[active=true]:block"
>
<SandpackFileExplorer style={{ height: "100svh" }} />
<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" }}
style={{ height: "100svh", width: "70%" }}
/>
</div>
<div
data-active={previewState === "preview"}
className="hidden w-full data-[active=true]:block"
>
<SandpackPreview style={{ height: "100svh" }} />
</div>
</SandpackLayout>
</SandpackProvider>
</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>
);