add search projects functionality

frontend/components/dashboard/index.tsx

@@ -15,6 +15,8 @@ import { Sandbox } from "@/lib/types"
 import DashboardProjects from "./projects"
 import DashboardSharedWithMe from "./shared"
 import NewProjectModal from "./newProject"
+import Link from "next/link"
+import { useSearchParams } from "next/navigation"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -40,6 +42,9 @@ export default function Dashboard({
     else return "justify-start font-normal text-muted-foreground"
   }
 
+  const searchParams = useSearchParams()
+  const q = searchParams.get("q")
+
   return (
     <>
       <NewProjectModal
@@ -72,23 +77,25 @@ export default function Dashboard({
               <Users className="w-4 h-4 mr-2" />
               Shared With Me
             </Button>
-            <Button
+            {/* <Button
               variant="ghost"
               onClick={() => setScreen("settings")}
               className={activeScreen("settings")}
             >
               <Settings className="w-4 h-4 mr-2" />
               Settings
-            </Button>
+            </Button> */}
           </div>
           <div className="flex flex-col">
-            <Button
+            <Link href="https://github.com/ishaan1013/sandbox">
-              variant="ghost"
+              <Button
-              className="justify-start font-normal text-muted-foreground"
+                variant="ghost"
-            >
+                className="justify-start font-normal text-muted-foreground"
-              <Code2 className="w-4 h-4 mr-2" />
+              >
-              GitHub Repository
+                <Code2 className="w-4 h-4 mr-2" />
-            </Button>
+                GitHub Repository
+              </Button>
+            </Link>
             <Button
               variant="ghost"
               className="justify-start font-normal text-muted-foreground"
@@ -99,7 +106,7 @@ export default function Dashboard({
           </div>
         </div>
         {screen === "projects" ? (
-          <DashboardProjects sandboxes={sandboxes} />
+          <DashboardProjects sandboxes={sandboxes} q={q} />
         ) : screen === "shared" ? (
           <DashboardSharedWithMe shared={shared} />
         ) : screen === "settings" ? null : null}

frontend/components/dashboard/projects.tsx

@@ -12,18 +12,20 @@ import { toast } from "sonner"
 
 export default function DashboardProjects({
   sandboxes,
+  q,
 }: {
   sandboxes: Sandbox[]
+  q: string | null
 }) {
   const onDelete = async (sandbox: Sandbox) => {
     toast(`Project ${sandbox.name} deleted.`)
-    const res = await deleteSandbox(sandbox.id)
+    await deleteSandbox(sandbox.id)
   }
 
   const onVisibilityChange = async (sandbox: Sandbox) => {
     const newVisibility = sandbox.visibility === "public" ? "private" : "public"
     toast(`Project ${sandbox.name} is now ${newVisibility}.`)
-    const res = await updateSandbox({
+    await updateSandbox({
       id: sandbox.id,
       visibility: newVisibility,
     })
@@ -31,57 +33,66 @@ export default function DashboardProjects({
 
   return (
     <div className="grow p-4 flex flex-col">
-      <div className="text-xl font-medium mb-8">My Projects</div>
+      <div className="text-xl font-medium mb-8">
+        {q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
+      </div>
       <div className="grow w-full ">
         <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
-          {sandboxes.map((sandbox) => (
+          {sandboxes.map((sandbox) => {
-            <Link
+            if (q && q.length > 0) {
-              key={sandbox.id}
+              if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
-              href={`/code/${sandbox.id}`}
+                return null
-              className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
+              }
-            >
+            }
-              <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
+            return (
-                {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
+              <Link
-                <div className="space-x-2 flex items-center justify-start w-full">
+                key={sandbox.id}
-                  <Image
+                href={`/code/${sandbox.id}`}
-                    alt=""
+                className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
-                    src={
+              >
-                      sandbox.type === "react"
+                <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
-                        ? "/project-icons/react.svg"
+                  {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
-                        : "/project-icons/node.svg"
+                  <div className="space-x-2 flex items-center justify-start w-full">
-                    }
+                    <Image
-                    width={20}
+                      alt=""
-                    height={20}
+                      src={
-                  />
+                        sandbox.type === "react"
-                  <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
+                          ? "/project-icons/react.svg"
-                    {sandbox.name}
+                          : "/project-icons/node.svg"
+                      }
+                      width={20}
+                      height={20}
+                    />
+                    <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
+                      {sandbox.name}
+                    </div>
+                    <ProjectCardDropdown
+                      sandbox={sandbox}
+                      onVisibilityChange={onVisibilityChange}
+                      onDelete={onDelete}
+                    />
                   </div>
-                  <ProjectCardDropdown
+                  <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
-                    sandbox={sandbox}
+                    <div className="flex items-center">
-                    onVisibilityChange={onVisibilityChange}
+                      {sandbox.visibility === "private" ? (
-                    onDelete={onDelete}
+                        <>
-                  />
+                          <Lock className="w-3 h-3 mr-2" /> Private
-                </div>
+                        </>
-                <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+                      ) : (
-                  <div className="flex items-center">
+                        <>
-                    {sandbox.visibility === "private" ? (
+                          <Globe className="w-3 h-3 mr-2" /> Public
-                      <>
+                        </>
-                        <Lock className="w-3 h-3 mr-2" /> Private
+                      )}
-                      </>
+                    </div>
-                    ) : (
+                    <div className="flex items-center">
-                      <>
+                      <Clock className="w-3 h-3 mr-2" /> 3d ago
-                        <Globe className="w-3 h-3 mr-2" /> Public
+                    </div>
-                      </>
-                    )}
                   </div>
-                  <div className="flex items-center">
+                  {/* </ProjectCard> */}
-                    <Clock className="w-3 h-3 mr-2" /> 3d ago
+                </Card>
-                  </div>
+              </Link>
-                </div>
+            )
-                {/* </ProjectCard> */}
+          })}
-              </Card>
-            </Link>
-          ))}
         </div>
       </div>
     </div>