From a0c2bb1bc3cc727c8188f27f6806385dd626e164 Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Tue, 30 Apr 2024 02:00:50 -0400
Subject: [PATCH] start terminals logic (frontend)

---
 frontend/components/editor/index.tsx | 18 ++++++++++++++++--
 frontend/components/ui/button.tsx    |  1 +
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index 7849dde..2365b84 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -14,7 +14,10 @@ import {
   ChevronLeft,
   ChevronRight,
   FileJson,
+  Plus,
   RotateCw,
+  Shell,
+  SquareTerminal,
   TerminalSquare,
 } from "lucide-react"
 import Tab from "../ui/tab"
@@ -26,6 +29,7 @@ import { io } from "socket.io-client"
 import { processFileType, validateName } from "@/lib/utils"
 import { toast } from "sonner"
 import EditorTerminal from "./terminal"
+import { Button } from "../ui/button"
 
 export default function CodeEditor({
   userId,
@@ -47,6 +51,7 @@ export default function CodeEditor({
   const [activeFile, setActiveFile] = useState<string | null>(null)
   const [tabs, setTabs] = useState<TTab[]>([])
   const [activeId, setActiveId] = useState<string | null>(null)
+  const [terminals, setTerminals] = useState<string[]>([])
 
   const socket = io(
     `http://localhost:4000?userId=${userId}&sandboxId=${sandboxId}`
@@ -301,8 +306,17 @@ export default function CodeEditor({
               className="p-2 flex flex-col"
             >
               <div className="h-10 w-full flex gap-2 shrink-0">
-                <Tab selected>Node</Tab>
-                <Tab>Console</Tab>
+                <Tab selected>
+                  <SquareTerminal className="w-4 h-4 mr-2" />
+                  Shell
+                </Tab>
+                <Button
+                  size="smIcon"
+                  variant={"secondary"}
+                  className={`font-normal select-none text-muted-foreground`}
+                >
+                  <Plus className="w-4 h-4" />
+                </Button>
               </div>
               <div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
                 {socket ? <EditorTerminal socket={socket} /> : null}
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 0270f64..0f3a6f6 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -25,6 +25,7 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
+        smIcon: "h-8 w-8",
       },
     },
     defaultVariants: {