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,16 +77,17 @@ 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">
+            <Link href="https://github.com/ishaan1013/sandbox">
               <Button
                 variant="ghost"
                 className="justify-start font-normal text-muted-foreground"
@@ -89,6 +95,7 @@ export default function Dashboard({
                 <Code2 className="w-4 h-4 mr-2" />
                 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,10 +33,18 @@ 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) => {
+            if (q && q.length > 0) {
+              if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
+                return null
+              }
+            }
+            return (
               <Link
                 key={sandbox.id}
                 href={`/code/${sandbox.id}`}
@@ -81,7 +91,8 @@ export default function DashboardProjects({
                   {/* </ProjectCard> */}
                 </Card>
               </Link>
-          ))}
+            )
+          })}
         </div>
       </div>
     </div>