Context Menu

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { Copy, Edit, Share, Trash } from "lucide-react";
5import { useState } from "react";
6 
7const menuItems = [
8  { icon: Copy, label: "Copy", shortcut: "⌘C" },
9  { icon: Edit, label: "Edit", shortcut: "⌘E" },
10  { icon: Share, label: "Share", shortcut: "⌘S" },
11  { icon: Trash, label: "Delete", shortcut: "⌘D", danger: true },
12];
13 
14export function ContextMenu() {
15  const [position, setPosition] = useState({ x: 0, y: 0 });
16  const [isVisible, setIsVisible] = useState(false);
17 
18  const handleContextMenu = (e: React.MouseEvent) => {
19    e.preventDefault();
20    setPosition({ x: e.clientX, y: e.clientY });
21    setIsVisible(true);
22  };
23 
24  return (
25    <>
26      <div
27        onContextMenu={handleContextMenu}
28        onClick={() => setIsVisible(false)}
29        className="flex h-64 w-64 items-center justify-center rounded-2xl border-2 border-dashed  bg-[var(--card-bg)]"
30      >
31        <p className="text-sm text-[var(--foreground)]/60">Right-click here</p>
32      </div>
33 
34      <AnimatePresence>
35        {isVisible && (
36          <>
37            <div
38              className="fixed inset-0 z-40"
39              onClick={() => setIsVisible(false)}
40            />
41            <motion.div
42              initial={{ opacity: 0, scale: 0.95 }}
43              animate={{ opacity: 1, scale: 1 }}
44              exit={{ opacity: 0, scale: 0.95 }}
45              transition={{ duration: 0.15 }}
46              className="fixed bg-card z-50 w-56 rounded-xl border  bg-[var(--card-bg)] p-2 shadow-2xl"
47              style={{ left: position.x, top: position.y }}
48            >
49              {menuItems.map((item, index) => {
50                const Icon = item.icon;
51                return (
52                  <motion.button
53                    key={item.label}
54                    initial={{ opacity: 0, x: -10 }}
55                    animate={{ opacity: 1, x: 0 }}
56                    transition={{ delay: index * 0.05 }}
57                    className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm ${
58                      item.danger
59                        ? "text-red-500 hover:bg-red-500/10"
60                        : "hover:bg-accent/10"
61                    }`}
62                    whileHover={{ x: 4 }}
63                    onClick={() => setIsVisible(false)}
64                  >
65                    <div className="flex items-center gap-3">
66                      <Icon className="h-4 w-4" />
67// … truncated