From dce7166a91a86c749a4274431f3e6b79b7af7b32 Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Mon, 8 Apr 2024 23:40:42 -0400
Subject: [PATCH] tab ui

---
 app/page.tsx                |  3 +-
 components/editor/index.tsx | 68 +++++++++++++++++++------------------
 components/navbar/index.tsx | 14 ++++++++
 components/ui/tab.tsx       | 31 +++++++++++++++++
 4 files changed, 82 insertions(+), 34 deletions(-)
 create mode 100644 components/navbar/index.tsx
 create mode 100644 components/ui/tab.tsx

diff --git a/app/page.tsx b/app/page.tsx
index afb292b..43a025b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import Navbar from "@/components/navbar"
 import dynamic from "next/dynamic"
 import Image from "next/image"
 
@@ -8,7 +9,7 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
 export default function Home() {
   return (
     <div className="w-screen flex flex-col h-screen bg-background">
-      <div className="h-12 flex">NAVBAR</div>
+      <Navbar />
       <div className="w-screen flex grow">
         <CodeEditor />
       </div>
diff --git a/components/editor/index.tsx b/components/editor/index.tsx
index abc0aa0..d6b6aae 100644
--- a/components/editor/index.tsx
+++ b/components/editor/index.tsx
@@ -11,7 +11,16 @@ import {
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
 import { Button } from "../ui/button"
-import { X } from "lucide-react"
+import {
+  ChevronLeft,
+  ChevronRight,
+  RotateCcw,
+  RotateCw,
+  Terminal,
+  TerminalSquare,
+  X,
+} from "lucide-react"
+import Tab from "../ui/tab"
 
 export default function CodeEditor() {
   const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
@@ -65,22 +74,10 @@ export default function CodeEditor() {
           defaultSize={60}
         >
           <div className="h-10 w-full flex gap-2">
-            <Button
-              size="sm"
-              className="min-w-20 justify-between"
-              variant="secondary"
-            >
-              index.html <X className="w-3 h-3" />
-            </Button>
-            <Button
-              size="sm"
-              className="min-w-20 justify-between"
-              variant="secondary"
-            >
-              style.css <X className="w-3 h-3" />
-            </Button>
+            <Tab>index.html</Tab>
+            <Tab>style.css</Tab>
           </div>
-          <div className="grow w-full overflow-hidden rounded-lg">
+          <div className="grow w-full overflow-hidden rounded-md">
             <Editor
               height="100%"
               defaultLanguage="typescript"
@@ -97,16 +94,26 @@ export default function CodeEditor() {
               minSize={20}
               className="p-2 flex flex-col"
             >
-              <div className="h-10 w-full flex gap-2">
-                <Button
-                  size="sm"
-                  className="min-w-20 justify-between"
-                  variant="secondary"
-                >
-                  localhost:3000 <X className="w-3 h-3" />
-                </Button>
+              <div className="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="flex space-x-1 translate-x-1">
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                      <TerminalSquare className="w-4 h-4" />
+                    </div>
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                      <ChevronLeft className="w-4 h-4" />
+                    </div>
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                      <ChevronRight className="w-4 h-4" />
+                    </div>
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+                      <RotateCw className="w-3 h-3" />
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div className="w-full grow rounded-lg bg-foreground"></div>
+              <div className="w-full grow rounded-md bg-foreground"></div>
             </ResizablePanel>
             <ResizableHandle />
             <ResizablePanel
@@ -115,15 +122,10 @@ export default function CodeEditor() {
               className="p-2 flex flex-col"
             >
               <div className="h-10 w-full flex gap-2">
-                <Button
-                  size="sm"
-                  className="min-w-20 justify-between"
-                  variant="secondary"
-                >
-                  Node <X className="w-3 h-3" />
-                </Button>
+                <Tab>Node</Tab>
+                <Tab>Console</Tab>
               </div>
-              <div className="w-full grow rounded-lg bg-secondary"></div>
+              <div className="w-full grow rounded-md bg-secondary"></div>
             </ResizablePanel>
           </ResizablePanelGroup>
         </ResizablePanel>
diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
new file mode 100644
index 0000000..54eb114
--- /dev/null
+++ b/components/navbar/index.tsx
@@ -0,0 +1,14 @@
+import { ChevronLeft, Home } from "lucide-react"
+import { Button } from "../ui/button"
+
+export default function Navbar() {
+  return (
+    <div className="h-12 px-2 w-full flex items-center justify-between">
+      <div className="flex items-center">
+        <Button variant="outline">
+          <ChevronLeft className="w-4 h-4 mr-2" /> Go Home
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/tab.tsx b/components/ui/tab.tsx
new file mode 100644
index 0000000..11ca1df
--- /dev/null
+++ b/components/ui/tab.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { X } from "lucide-react"
+import { Button } from "./button"
+
+export default function Tab({
+  children,
+  onClick,
+  onClose,
+}: {
+  children: React.ReactNode
+  onClick?: () => void
+  onClose?: () => void
+}) {
+  return (
+    <Button
+      onClick={onClick ?? undefined}
+      size="sm"
+      variant="secondary"
+      className="group select-none"
+    >
+      {children}
+      <div
+        onClick={onClose ?? undefined}
+        className=" p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
+      >
+        <X className="w-3 h-3" />
+      </div>
+    </Button>
+  )
+}