refactor folder

frontend/components/dashboard/index.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import CustomButton from "@/components/ui/customButton"
+import { Button } from "@/components/ui/button"
+import {
+  Bolt,
+  Clock,
+  Code2,
+  FolderDot,
+  FolderOpenDot,
+  Globe,
+  HelpCircle,
+  Plus,
+  Settings,
+  User,
+  Users,
+} from "lucide-react"
+import { useState } from "react"
+import { Card } from "../ui/card"
+import ProjectCard from "./projectCard"
+
+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 shrink-0 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 p-4 grid lg:grid-cols-4 xl:grid-cols-5 md:grid-cols-3 gap-4">
+        <ProjectCard>
+          <div className="font-medium flex items-center whitespace-nowrap w-full text-ellipsis overflow-hidden">
+            React Project 1
+          </div>
+          <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+            <div className="flex items-center">
+              <Globe className="w-3 h-3 mr-2" /> Public
+            </div>
+            <div className="flex items-center">
+              <Clock className="w-3 h-3 mr-2" /> 3d ago
+            </div>
+          </div>
+        </ProjectCard>
+      </div>
+    </div>
+  )
+}

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

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

frontend/components/dashboard/projectCard.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+export default function ProjectCard({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      tabIndex={0}
+      className={cn(
+        "rounded-lg border bg-card text-card-foreground shadow h-48 p-[1px] gradient-project-card-bg cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      )}
+    >
+      <div className="rounded-[7px] p-4 h-full flex flex-col justify-between gradient-project-card">
+        {children}
+      </div>
+    </div>
+  )
+}