selected tab ui

frontend/components/editor/index.tsx

@@ -70,7 +70,7 @@ export default function CodeEditor() {
           defaultSize={60}
         >
           <div className="h-10 w-full flex gap-2">
-            <Tab>index.html</Tab>
+            <Tab selected>index.html</Tab>
             <Tab>style.css</Tab>
           </div>
           <div className="grow w-full overflow-hidden rounded-md">
@@ -130,7 +130,7 @@ export default function CodeEditor() {
               className="p-2 flex flex-col"
             >
               <div className="h-10 w-full flex gap-2">
-                <Tab>Node</Tab>
+                <Tab selected>Node</Tab>
                 <Tab>Console</Tab>
               </div>
               <div className="w-full grow rounded-md bg-secondary"></div>

frontend/components/ui/tab.tsx

@@ -5,10 +5,12 @@ import { Button } from "./button"
 
 export default function Tab({
   children,
+  selected,
   onClick,
   onClose,
 }: {
   children: React.ReactNode
+  selected?: boolean
   onClick?: () => void
   onClose?: () => void
 }) {
@@ -16,8 +18,10 @@ export default function Tab({
     <Button
       onClick={onClick ?? undefined}
       size="sm"
-      variant="secondary"
+      variant={"secondary"}
-      className="group select-none"
+      className={`group select-none ${
+        selected ? "bg-neutral-700 hover:bg-neutral-600" : ""
+      }`}
     >
       {children}
       <div