From f68920e936c4d71446188a6917c610a383ca81f8 Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Sat, 11 May 2024 19:28:37 -0700
Subject: [PATCH] modify preview ui

---
 frontend/components/editor/index.tsx         |  2 +-
 frontend/components/editor/preview/index.tsx | 10 ++++-
 frontend/components/editor/sidebar/index.tsx | 39 +++++++++++++-------
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index 493b5a0..5197ad7 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -715,7 +715,7 @@ export default function CodeEditor({
           <ResizablePanelGroup direction="vertical">
             <ResizablePanel
               ref={previewPanelRef}
-              defaultSize={50}
+              defaultSize={4}
               collapsedSize={4}
               minSize={25}
               collapsible
diff --git a/frontend/components/editor/preview/index.tsx b/frontend/components/editor/preview/index.tsx
index f26f1a7..1196502 100644
--- a/frontend/components/editor/preview/index.tsx
+++ b/frontend/components/editor/preview/index.tsx
@@ -3,6 +3,7 @@
 import {
   ChevronLeft,
   ChevronRight,
+  Globe,
   RotateCw,
   TerminalSquare,
   UnfoldVertical,
@@ -22,8 +23,13 @@ export default function PreviewWindow({
           collapsed ? "h-full" : "h-10"
         } 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">
-          Preview
+        <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
+          <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">
             {collapsed ? (
               <PreviewButton onClick={open}>
diff --git a/frontend/components/editor/sidebar/index.tsx b/frontend/components/editor/sidebar/index.tsx
index 2720a1d..6027012 100644
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@@ -1,6 +1,13 @@
 "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 SidebarFolder from "./folder";
 import { Sandbox, TFile, TFolder, TTab } from "@/lib/types";
@@ -13,6 +20,7 @@ import {
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import Button from "@/components/ui/customButton";
 
 export default function Sidebar({
   sandboxData,
@@ -177,19 +185,24 @@ export default function Sidebar({
           )}
         </div>
       </div>
-      <div className="flex items-center justify-between w-full">
-        <div className="flex items-center">
-          <Sparkles
-            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">
-            ⌘G
-          </span>
+      <div className="w-full space-y-4">
+        <div className="flex items-center justify-between w-full">
+          <div className="flex items-center">
+            <Sparkles
+              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">
+              ⌘G
+            </span>
+          </div>
+          <Switch checked={ai} onCheckedChange={setAi} />
         </div>
-        <Switch checked={ai} onCheckedChange={setAi} />
+        <Button className="w-full">
+          <MonitorPlay className="w-4 h-4 mr-2" /> Run
+        </Button>
       </div>
     </div>
   );