navbar improvements + page re-organization

app/code/[id]/page.tsx

@@ -0,0 +1,18 @@
+import Navbar from "@/components/navbar"
+import dynamic from "next/dynamic"
+import Image from "next/image"
+
+const CodeEditor = dynamic(() => import("@/components/editor"), {
+  ssr: false,
+})
+
+export default function CodePage() {
+  return (
+    <div className="w-screen flex flex-col h-screen bg-background">
+      <Navbar />
+      <div className="w-screen flex grow">
+        <CodeEditor />
+      </div>
+    </div>
+  )
+}

app/code/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function Page() {
+  redirect("/")
+}

app/page.tsx

@@ -1,18 +1,8 @@
 import Navbar from "@/components/navbar"
 import dynamic from "next/dynamic"
-import Image from "next/image"
-
-const CodeEditor = dynamic(() => import("@/components/editor"), {
-  ssr: false,
-})
 
 export default function Home() {
   return (
-    <div className="w-screen flex flex-col h-screen bg-background">
+    <div className="w-screen flex flex-col h-screen bg-background">test</div>
-      <Navbar />
-      <div className="w-screen flex grow">
-        <CodeEditor />
-      </div>
-    </div>
   )
 }

assets/logo.svg

@@ -0,0 +1,22 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="100" fill="url(#paint0_linear_1_21)"/>
+<rect x="8" y="8" width="496" height="496" rx="94" fill="url(#paint1_linear_1_21)"/>
+<path d="M150.5 388.5H339.5C346.661 388.5 353.528 385.655 358.592 380.592C363.655 375.529 366.5 368.661 366.5 361.5V186L299 118.5H177.5C170.339 118.5 163.472 121.345 158.408 126.408C153.345 131.472 150.5 138.339 150.5 145.5V199.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.5 118.5V172.5C285.5 179.661 288.345 186.528 293.408 191.592C298.472 196.655 305.339 199.5 312.5 199.5H366.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.5 253.5C146.92 253.5 143.486 254.922 140.954 257.454C138.422 259.986 137 263.42 137 267V280.5C137 284.08 135.578 287.514 133.046 290.046C130.514 292.578 127.08 294 123.5 294C127.08 294 130.514 295.422 133.046 297.954C135.578 300.486 137 303.92 137 307.5V321C137 324.58 138.422 328.014 140.954 330.546C143.486 333.078 146.92 334.5 150.5 334.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M204.5 334.5C208.08 334.5 211.514 333.078 214.046 330.546C216.578 328.014 218 324.58 218 321V307.5C218 303.92 219.422 300.486 221.954 297.954C224.486 295.422 227.92 294 231.5 294C227.92 294 224.486 292.578 221.954 290.046C219.422 287.514 218 284.08 218 280.5V267C218 263.42 216.578 259.986 214.046 257.454C211.514 254.922 208.08 253.5 204.5 253.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_21" x1="423.5" y1="-1.73873e-05" x2="169" y2="497" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.075" stop-color="#5F5F5F"/>
+<stop offset="0.89" stop-color="#3F3F3F"/>
+<stop offset="1" stop-color="#6A6A6A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_21" x1="418.266" y1="7.99999" x2="256" y2="504" gradientUnits="userSpaceOnUse">
+<stop stop-color="#393939"/>
+<stop offset="0.08" stop-color="#282828"/>
+<stop offset="0.5" stop-color="#191919"/>
+<stop offset="1" stop-color="#0D0D0D"/>
+</linearGradient>
+</defs>
+</svg>

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 Image from "next/image"
-import { Button } from "../ui/button"
+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="h-14 px-2 w-full flex items-center justify-between border-b border-border">
-      <div className="flex items-center">
+      <div className="flex items-center space-x-4">
-        <Button variant="outline">
+        <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">
-          <ChevronLeft className="w-4 h-4 mr-2" /> Go Home
+          <Image src={Logo} alt="Logo" width={36} height={36} />
-        </Button>
+        </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>