Pien-Studio/apps/web/components/editor/canvas-context-menu.tsx

import React from "react";
import { hoverSubtleClass } from "../../lib/theme";

type CanvasContextMenuProps = {
  isDark: boolean;
  x: number;
  y: number;
  labels: {
    copy: string;
    cut: string;
    paste: string;
  };
  onCopy: () => void;
  onCut: () => void;
  onPaste: () => void;
};

export function CanvasContextMenu({ isDark, x, y, labels, onCopy, onCut, onPaste }: CanvasContextMenuProps) {
  return (
    <div
      className={`absolute z-40 min-w-[160px] rounded border p-1 text-[12px] shadow-2xl ${
        isDark ? "border-white/10 bg-[#2a2c31] text-[#e2e5ea]" : "border-black/10 bg-white text-[#1f2430]"
      }`}
      style={{ left: x, top: y }}
      onClick={(event) => event.stopPropagation()}
    >
      <button type="button" onClick={onCopy} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>
        {labels.copy}
      </button>
      <button type="button" onClick={onCut} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>
        {labels.cut}
      </button>
      <button type="button" onClick={onPaste} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>
        {labels.paste}
      </button>
    </div>
  );
}