| 1 | "use client"; |
| 2 | |
| 3 | import { Copy, MoreVertical, Trash2 } from "lucide-react"; |
| 4 | |
| 5 | import { PRESENTATION_PORTAL_CONTENT_CLASS } from "@/components/presentation/overlay-layers"; |
| 6 | import { Button } from "@/components/ui/button"; |
| 7 | import { |
| 8 | DropdownMenu, |
| 9 | DropdownMenuContent, |
| 10 | DropdownMenuItem, |
| 11 | DropdownMenuSeparator, |
| 12 | DropdownMenuTrigger, |
| 13 | } from "@/components/ui/dropdown-menu"; |
| 14 | import { cn } from "@/lib/utils"; |
| 15 | import { useSlideEditorContext } from "./SlideEditorContext"; |
| 16 | |
| 17 | export function MoreOptionsDropdown() { |
| 18 | const { |
| 19 | isMenuOpen, |
| 20 | setIsMenuOpen, |
| 21 | setShowDeleteConfirm, |
| 22 | onDuplicate, |
| 23 | dragListeners, |
| 24 | } = useSlideEditorContext(); |
| 25 | |
| 26 | return ( |
| 27 | <DropdownMenu open={isMenuOpen}> |
| 28 | <DropdownMenuTrigger asChild> |
| 29 | <Button |
| 30 | variant="ghost" |
| 31 | size="icon" |
| 32 | className="size-8! cursor-grab rounded-full border border-white/20 bg-background/50 shadow backdrop-blur-md transition-all hover:bg-background/80" |
| 33 | {...dragListeners} |
| 34 | onClick={() => setIsMenuOpen(true)} |
| 35 | > |
| 36 | <MoreVertical className="size-4 text-muted-foreground" /> |
| 37 | </Button> |
| 38 | </DropdownMenuTrigger> |
| 39 | <DropdownMenuContent |
| 40 | onInteractOutside={() => setIsMenuOpen(false)} |
| 41 | align="start" |
| 42 | className={cn(PRESENTATION_PORTAL_CONTENT_CLASS, "w-48")} |
| 43 | > |
| 44 | <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer"> |
| 45 | <Copy className="mr-2 size-4" /> |
| 46 | Duplicate card |
| 47 | </DropdownMenuItem> |
| 48 | |
| 49 | <DropdownMenuSeparator /> |
| 50 | <DropdownMenuItem |
| 51 | onClick={() => { |
| 52 | setIsMenuOpen(false); |
| 53 | setShowDeleteConfirm(true); |
| 54 | }} |
| 55 | className="cursor-pointer text-destructive focus:text-destructive" |
| 56 | > |
| 57 | <Trash2 className="mr-2 size-4" /> |
| 58 | Delete |
| 59 | </DropdownMenuItem> |
| 60 | </DropdownMenuContent> |
| 61 | </DropdownMenu> |
| 62 | ); |
| 63 | } |
| 64 |