separate dashboard page components

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -15,7 +15,13 @@ import {
 export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm">
+      <DropdownMenuTrigger
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+        }}
+        className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
+      >
         <Ellipsis className="w-4 h-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-40">

frontend/components/dashboard/projectCard/index.tsx

@@ -1,15 +1,18 @@
 import { cn } from "@/lib/utils"
+import Link from "next/link"
 
 export default function ProjectCard({
   children,
+  id,
   className,
 }: {
   children: React.ReactNode
+  id: string
   className?: string
 }) {
   return (
-    <div
-      tabIndex={0}
+    <Link
+      href={`/code/${id}`}
       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-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring"
       )}
@@ -17,6 +20,6 @@ export default function ProjectCard({
       <div className="rounded-[7px] p-4 h-full flex flex-col justify-between gradient-project-card">
         {children}
       </div>
-    </div>
+    </Link>
   )
 }