tab ui

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>

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
+            <Tab>index.html</Tab>
-              size="sm"
+            <Tab>style.css</Tab>
-              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>
           </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">
+              <div className="h-10 select-none w-full flex gap-2">
-                <Button
+                <div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
-                  size="sm"
+                  Preview
-                  className="min-w-20 justify-between"
+                  <div className="flex space-x-1 translate-x-1">
-                  variant="secondary"
+                    <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" />
-                  localhost:3000 <X className="w-3 h-3" />
-                </Button>
                     </div>
-              <div className="w-full grow rounded-lg bg-foreground"></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-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
+                <Tab>Node</Tab>
-                  size="sm"
+                <Tab>Console</Tab>
-                  className="min-w-20 justify-between"
-                  variant="secondary"
-                >
-                  Node <X className="w-3 h-3" />
-                </Button>
               </div>
-              <div className="w-full grow rounded-lg bg-secondary"></div>
+              <div className="w-full grow rounded-md bg-secondary"></div>
             </ResizablePanel>
           </ResizablePanelGroup>
         </ResizablePanel>

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>
+  )
+}

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>
+  )
+}