card ui

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { Sandbox } from "@/lib/types"
+import { Ellipsis, Lock, Trash2 } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+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">
+        <Ellipsis className="w-4 h-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-40">
+        <DropdownMenuItem>
+          <Lock className="mr-2 h-4 w-4" />
+          <span>Make Private</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="!text-destructive">
+          <Trash2 className="mr-2 h-4 w-4" />
+          <span>Delete Project</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

frontend/components/dashboard/projectCard/index.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-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring"
+      )}
+    >
+      <div className="rounded-[7px] p-4 h-full flex flex-col justify-between gradient-project-card">
+        {children}
+      </div>
+    </div>
+  )
+}