TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify preview ui

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-11 19:28:37 -07:00
parent 9bb5ed1517
commit f68920e936
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/editor/index.tsx
View File

@ -715,7 +715,7 @@ export default function CodeEditor({
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup direction="vertical">
<ResizablePanel <ResizablePanel
ref={previewPanelRef} ref={previewPanelRef}
defaultSize={50} defaultSize={4}
collapsedSize={4} collapsedSize={4}
minSize={25} minSize={25}
collapsible collapsible

10
frontend/components/editor/preview/index.tsx
View File

@ -3,6 +3,7 @@
import { import {
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
Globe,
RotateCw, RotateCw,
TerminalSquare, TerminalSquare,
UnfoldVertical, UnfoldVertical,
@ -22,8 +23,13 @@ export default function PreviewWindow({
collapsed ? "h-full" : "h-10" collapsed ? "h-full" : "h-10"
} select-none w-full flex gap-2`} } select-none w-full flex gap-2`}
> >
<div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between"> <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
Preview <div className="text-xs">
Preview
<span className="inline-block ml-2 items-center font-mono text-muted-foreground">
localhost:3000
</span>
</div>
<div className="flex space-x-1 translate-x-1"> <div className="flex space-x-1 translate-x-1">
{collapsed ? ( {collapsed ? (
<PreviewButton onClick={open}> <PreviewButton onClick={open}>

39
frontend/components/editor/sidebar/index.tsx
View File

@ -1,6 +1,13 @@
"use client"; "use client";
import { FilePlus, FolderPlus, Loader2, Search, Sparkles } from "lucide-react"; import {
FilePlus,
FolderPlus,
Loader2,
MonitorPlay,
Search,
Sparkles,
} from "lucide-react";
import SidebarFile from "./file"; import SidebarFile from "./file";
import SidebarFolder from "./folder"; import SidebarFolder from "./folder";
import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"; import { Sandbox, TFile, TFolder, TTab } from "@/lib/types";
@ -13,6 +20,7 @@ import {
dropTargetForElements, dropTargetForElements,
monitorForElements, monitorForElements,
} from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import Button from "@/components/ui/customButton";
export default function Sidebar({ export default function Sidebar({
sandboxData, sandboxData,
@ -177,19 +185,24 @@ export default function Sidebar({
)} )}
</div> </div>
</div> </div>
<div className="flex items-center justify-between w-full"> <div className="w-full space-y-4">
<div className="flex items-center"> <div className="flex items-center justify-between w-full">
<Sparkles <div className="flex items-center">
className={`h-4 w-4 mr-2 ${ <Sparkles
ai ? "text-indigo-500" : "text-muted-foreground" className={`h-4 w-4 mr-2 ${
}`} ai ? "text-indigo-500" : "text-muted-foreground"
/> }`}
Copilot{" "} />
<span className="font-mono text-muted-foreground inline-block ml-1.5 text-xs leading-none border border-b-2 border-muted-foreground py-1 px-1.5 rounded-md"> Copilot{" "}
⌘G <span className="font-mono text-muted-foreground inline-block ml-1.5 text-xs leading-none border border-b-2 border-muted-foreground py-1 px-1.5 rounded-md">
</span> ⌘G
</span>
</div>
<Switch checked={ai} onCheckedChange={setAi} />
</div> </div>
<Switch checked={ai} onCheckedChange={setAi} /> <Button className="w-full">
<MonitorPlay className="w-4 h-4 mr-2" /> Run
</Button>
</div> </div>
</div> </div>
); );