fix propagation

This commit is contained in:
Ishaan Dey
2024-05-16 21:45:19 -07:00
parent bf0111fe91
commit 509669ea30
4 changed files with 33 additions and 38 deletions

View File

@ -1,30 +1,30 @@
"use client"
"use client";
import { Sandbox } from "@/lib/types"
import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react"
import { Sandbox } from "@/lib/types";
import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
} from "@/components/ui/dropdown-menu";
export default function ProjectCardDropdown({
sandbox,
onVisibilityChange,
onDelete,
}: {
sandbox: Sandbox
onVisibilityChange: (sandbox: Sandbox) => void
onDelete: (sandbox: Sandbox) => void
sandbox: Sandbox;
onVisibilityChange: (sandbox: Sandbox) => void;
onDelete: (sandbox: Sandbox) => void;
}) {
return (
<DropdownMenu>
<DropdownMenu modal={false}>
<DropdownMenuTrigger
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
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 outline-foreground"
>
@ -33,8 +33,8 @@ export default function ProjectCardDropdown({
<DropdownMenuContent className="w-40">
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation()
onVisibilityChange(sandbox)
e.stopPropagation();
onVisibilityChange(sandbox);
}}
className="cursor-pointer"
>
@ -52,8 +52,8 @@ export default function ProjectCardDropdown({
</DropdownMenuItem>
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation()
onDelete(sandbox)
e.stopPropagation();
onDelete(sandbox);
}}
className="!text-destructive cursor-pointer"
>
@ -62,5 +62,5 @@ export default function ProjectCardDropdown({
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
);
}

View File

@ -7,25 +7,31 @@ import ProjectCardDropdown from "./dropdown";
import { Clock, Globe, Lock } from "lucide-react";
import { Sandbox } from "@/lib/types";
import { Card } from "@/components/ui/card";
import { useRouter } from "next/navigation";
export default function ProjectCard({
children,
sandbox,
onVisibilityChange,
onDelete,
deletingId,
}: {
children?: React.ReactNode;
sandbox: Sandbox;
onVisibilityChange: (sandbox: Sandbox) => void;
onDelete: (sandbox: Sandbox) => void;
deletingId: string;
}) {
const [hovered, setHovered] = useState(false);
const router = useRouter();
return (
<Card
tabIndex={0}
onClick={() => router.push(`/code/${sandbox.id}`)}
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"
className={`group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-muted-foreground relative overflow-hidden transition-all`}
>
<AnimatePresence>
{hovered && (