Context Menu Bubble

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { Copy, Edit, MoreVertical, Share2, Trash2 } from "lucide-react";
5import { MouseEvent, useRef, useState } from "react";
6 
7type MenuItem = {
8  label: string;
9  icon: React.ReactNode;
10  onClick: () => void;
11  danger?: boolean;
12};
13 
14type ContextMenuBubbleProps = {
15  items?: MenuItem[];
16};
17 
18export function ContextMenuBubble({
19  items = [
20    { label: "Edit", icon: <Edit className="h-4 w-4" />, onClick: () => {} },
21    { label: "Copy", icon: <Copy className="h-4 w-4" />, onClick: () => {} },
22    { label: "Share", icon: <Share2 className="h-4 w-4" />, onClick: () => {} },
23    {
24      label: "Delete",
25      icon: <Trash2 className="h-4 w-4" />,
26      onClick: () => {},
27      danger: true,
28    },
29  ],
30}: ContextMenuBubbleProps) {
31  const [isOpen, setIsOpen] = useState(false);
32  const [position, setPosition] = useState({ x: 0, y: 0 });
33  const triggerRef = useRef<HTMLButtonElement>(null);
34  const containerRef = useRef<HTMLDivElement>(null);
35 
36  const updatePosition = () => {
37    if (triggerRef.current && containerRef.current) {
38      const buttonRect = triggerRef.current.getBoundingClientRect();
39      const containerRect = containerRef.current.getBoundingClientRect();
40      setPosition({
41        x: buttonRect.left + buttonRect.width / 2 - containerRect.left,
42        y: buttonRect.top + buttonRect.height / 2 - containerRect.top,
43      });
44    }
45  };
46 
47  const handleContextMenu = (e: MouseEvent) => {
48    e.preventDefault();
49    updatePosition();
50    setIsOpen(true);
51  };
52 
53  const handleClick = () => {
54    updatePosition();
55    setIsOpen(!isOpen);
56  };
57 
58  const closeMenu = () => setIsOpen(false);
59 
60  const itemCount = items.length;
61  const radius = 80;
62  const angleStep = (2 * Math.PI) / itemCount;
63 
64  return (
65    <div
66      ref={containerRef}
67      className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-2xl"
68    >
69      <motion.button
70        ref={triggerRef}
71        onContextMenu={handleContextMenu}
72        onClick={handleClick}
73        whileHover={{ scale: 1.1 }}
74        whileTap={{ scale: 0.9 }}
75        className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground"
76      >
77        <MoreVertical className="h-5 w-5" />
78      </motion.button>
79 
80      <AnimatePresence>
81        {isOpen && (
82          <>
83            <motion.div
84              initial={{ opacity: 0 }}
85              animate={{ opacity: 1 }}
86// … truncated