navbar improvements + page re-organization

components/editor/index.tsx

@@ -82,6 +82,16 @@ export default function CodeEditor() {
               height="100%"
               defaultLanguage="typescript"
               onMount={handleEditorMount}
+              options={{
+                minimap: {
+                  enabled: false,
+                },
+                padding: {
+                  bottom: 4,
+                  top: 4,
+                },
+                scrollBeyondLastLine: false,
+              }}
               theme="vs-dark"
             />
           </div>

components/navbar/index.tsx

@@ -1,13 +1,21 @@
-import { ChevronLeft, Home } from "lucide-react"
-import { Button } from "../ui/button"
+import Image from "next/image"
+import Logo from "@/assets/logo.svg"
+import { Input } from "../ui/input"
+import { Pencil } from "lucide-react"
 
 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 className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
+      <div className="flex items-center space-x-4">
+        <button className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm">
+          <Image src={Logo} alt="Logo" width={36} height={36} />
+        </button>
+        <div className="text-sm font-medium flex items-center">
+          My React Project{" "}
+          <div className="h-7 w-7 ml-1 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-md">
+            <Pencil className="w-4 h-4" />
+          </div>
+        </div>
       </div>
     </div>
   )

components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

components/ui/tab.tsx

@@ -22,7 +22,7 @@ export default function Tab({
       {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"
+        className="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>