dashboard ui

app/code/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Navbar from "@/components/navbar"
+import Navbar from "@/components/editor/navbar"
 import { useClerk } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
 

app/dashboard/page.tsx

@@ -0,0 +1,19 @@
+import { UserButton, currentUser } from "@clerk/nextjs"
+import { redirect } from "next/navigation"
+import Dashboard from "@/components/dashboard"
+import Navbar from "@/components/dashboard/navbar"
+
+export default async function DashboardPage() {
+  const user = await currentUser()
+
+  if (!user) {
+    redirect("/")
+  }
+
+  return (
+    <div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
+      <Navbar />
+      <Dashboard />
+    </div>
+  )
+}

app/globals.css

@@ -76,13 +76,13 @@
 }
 
 .gradient-button-bg {
-  background: radial-gradient(circle at top, #a5b4fc, #3730a3); /* violet 300 -> 800 */
+  background: radial-gradient(circle at top, #a5b4fc -25%, #3730a3 50%); /* violet 300 -> 800 */
 }
 
 .gradient-button {
-  background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 100%); /* violet 900 -> bg */
+  background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 80%); /* violet 900 -> bg */
 }
 
 .gradient-button-bg > div:hover {
-  background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 150%); /* violet 900 -> bg */
+  background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 130%); /* violet 900 -> bg */
 }

components/dashboard/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import CustomButton from "@/components/ui/customButton"
+import { Button } from "@/components/ui/button"
+import {
+  Bolt,
+  Code2,
+  FolderDot,
+  FolderOpenDot,
+  HelpCircle,
+  Plus,
+  Settings,
+  User,
+  Users,
+} from "lucide-react"
+import { useState } from "react"
+
+type TScreen = "projects" | "shared" | "settings" | "search"
+
+export default function Dashboard() {
+  const [screen, setScreen] = useState<TScreen>("projects")
+
+  const activeScreen = (s: TScreen) => {
+    if (screen === s) return "justify-start"
+    else return "justify-start font-normal text-muted-foreground"
+  }
+
+  return (
+    <div className="flex grow w-full">
+      <div className="w-56 border-r border-border p-4 justify-between flex flex-col">
+        <div className="flex flex-col">
+          <CustomButton className="mb-4">
+            <Plus className="w-4 h-4 mr-2" />
+            New Project
+          </CustomButton>
+          <Button
+            variant="ghost"
+            onClick={() => setScreen("projects")}
+            className={activeScreen("projects")}
+          >
+            <FolderDot className="w-4 h-4 mr-2" />
+            My Projects
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setScreen("shared")}
+            className={activeScreen("shared")}
+          >
+            <Users className="w-4 h-4 mr-2" />
+            Shared Rooms
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setScreen("settings")}
+            className={activeScreen("settings")}
+          >
+            <Settings className="w-4 h-4 mr-2" />
+            Settings
+          </Button>
+        </div>
+        <div className="flex flex-col">
+          <Button
+            variant="ghost"
+            className="justify-start font-normal text-muted-foreground"
+          >
+            <Code2 className="w-4 h-4 mr-2" />
+            GitHub Repository
+          </Button>
+          <Button
+            variant="ghost"
+            className="justify-start font-normal text-muted-foreground"
+          >
+            <HelpCircle className="w-4 h-4 mr-2" />
+            About
+          </Button>
+        </div>
+      </div>
+      <div className="grow flex flex-col items-start p-4">
+        <h1 className="text-2xl font-medium text-center">
+          A Collaborative, AI-Powered, Auto-Scaling Code Editor
+        </h1>
+      </div>
+    </div>
+  )
+}

components/dashboard/navbar/index.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { UserButton } from "@clerk/nextjs"
+import { dark } from "@clerk/themes"
+import Image from "next/image"
+import Link from "next/link"
+import Logo from "@/assets/logo.svg"
+import { Input } from "../../ui/input"
+import { Search } from "lucide-react"
+import { Suspense, useCallback, useEffect, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import DashboardNavbarSearch from "./search"
+
+export default function DashboardNavbar() {
+  return (
+    <div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
+      <div className="flex items-center space-x-4">
+        <Link
+          href="/"
+          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} />
+        </Link>
+        <div className="text-sm font-medium flex items-center">Sandbox</div>
+      </div>
+      <div className="flex items-center space-x-4">
+        <DashboardNavbarSearch />
+        <UserButton
+          appearance={{
+            baseTheme: dark,
+          }}
+          afterSignOutUrl="/"
+        />
+      </div>
+    </div>
+  )
+}

components/dashboard/navbar/search.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { Input } from "../../ui/input"
+import { Search } from "lucide-react"
+import { useCallback, useEffect, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+
+export default function DashboardNavbarSearch() {
+  const [search, setSearch] = useState("")
+  const router = useRouter()
+
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      console.log("SEARCH", search)
+      if (search) {
+        router.push(`/dashboard?q=${search}`)
+      } else {
+        router.push(`/dashboard`)
+      }
+    }, 300)
+
+    return () => clearTimeout(delayDebounceFn)
+  }, [search])
+
+  return (
+    <div className="relative h-9 w-44 flex items-center justify-start">
+      <Search className="w-4 h-4 absolute left-2 text-muted-foreground" />
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        placeholder="Search projects..."
+        className="pl-8"
+      />
+    </div>
+  )
+}

components/ui/customButton.tsx

@@ -1,44 +1,27 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import { Plus } from "lucide-react"
-import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@/lib/utils"
 
-const buttonVariants = cva(
+const Button = ({
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  children,
-  {
+  className,
-    variants: {
+  onClick,
-      variant: {
+}: {
-        default:
+  children: React.ReactNode
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  className?: string
-        destructive:
+  onClick?: () => void
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+}) => {
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const Button = ({ children }: { children: React.ReactNode }) => {
   return (
-    <button className="gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium  focus-visible:ring-offset-1 focus-visible:ring-offset-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+    <button
-      <div className="rounded-[6px] gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">
+      onClick={onClick}
-        Go To App
+      className={cn(
+        className,
+        "gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium  focus-visible:ring-offset-1 focus-visible:ring-offset-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+      )}
+    >
+      <div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">
+        <Plus className="w-4 h-4 mr-2" />
+        New Project
       </div>
     </button>
   )