project card effect

frontend/components/dashboard/projectCard/index.tsx

@@ -1,26 +1,80 @@
-import { cn } from "@/lib/utils"
-import Link from "next/link"
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import { useState } from "react";
+import ProjectCardDropdown from "./dropdown";
+import { Clock, Globe, Lock } from "lucide-react";
+import { Sandbox } from "@/lib/types";
+import { Card } from "@/components/ui/card";
 
 export default function ProjectCard({
   children,
-  id,
-  className,
+  sandbox,
+  onVisibilityChange,
+  onDelete,
 }: {
-  children: React.ReactNode
-  id: string
-  className?: string
+  children?: React.ReactNode;
+  sandbox: Sandbox;
+  onVisibilityChange: (sandbox: Sandbox) => void;
+  onDelete: (sandbox: Sandbox) => void;
 }) {
+  const [hovered, setHovered] = useState(false);
+
   return (
-    <Link
-      href={`/code/${id}`}
-      className={cn(
-        className,
-        "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"
-      )}
+    <Card
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className="group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all relative overflow-hidden"
     >
-      <div className="rounded-[7px] p-4 h-full flex flex-col justify-between gradient-project-card">
-        {children}
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="h-full w-full absolute inset-0"
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="space-x-2 flex items-center justify-start w-full z-10">
+        <Image
+          alt=""
+          src={
+            sandbox.type === "react"
+              ? "/project-icons/react.svg"
+              : "/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>
-    </Link>
-  )
+      <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm z-10">
+        <div className="flex items-center">
+          {sandbox.visibility === "private" ? (
+            <>
+              <Lock className="w-3 h-3 mr-2" /> Private
+            </>
+          ) : (
+            <>
+              <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>
+    </Card>
+  );
 }