Dwinzo_Demo/app/src/components/ui/menu/contextMenu.tsx

import React from "react";

type ContextMenuProps = {
    visibility: {
        rename: boolean;
        focus: boolean;
        flipX: boolean;
        flipZ: boolean;
        move: boolean;
        rotate: boolean;
        duplicate: boolean;
        copy: boolean;
        paste: boolean;
        modifier: boolean;
        group: boolean;
        array: boolean;
        delete: boolean;
    };
    onRename: () => void;
    onFocus: () => void;
    onFlipX: () => void;
    onFlipZ: () => void;
    onMove: () => void;
    onRotate: () => void;
    onDuplicate: () => void;
    onCopy: () => void;
    onPaste: () => void;
    onGroup: () => void;
    onArray: () => void;
    onDelete: () => void;
};

const ContextMenu: React.FC<ContextMenuProps> = ({
    visibility,
    onRename,
    onFocus,
    onFlipX,
    onFlipZ,
    onMove,
    onRotate,
    onDuplicate,
    onCopy,
    onPaste,
    onGroup,
    onArray,
    onDelete,
}) => {
    const styles: { [key: string]: React.CSSProperties } = {
        contextMenu: {
            position: "absolute",
            top: 0,
            left: 0,
            backgroundColor: "#2c2c2c",
            borderRadius: "6px",
            padding: "8px",
            color: "white",
            fontFamily: "sans-serif",
            fontSize: "14px",
            boxShadow: "0 0 8px rgba(0,0,0,0.4)",
            zIndex: 1000,
        },
        menuItem: {
            margin: "4px 0",
        },
        button: {
            background: "none",
            border: "none",
            color: "inherit",
            display: "flex",
            justifyContent: "space-between",
            width: "180px",
            padding: "4px 8px",
            cursor: "pointer",
        },
        submenu: {
            marginLeft: "10px",
            marginTop: "4px",
            backgroundColor: "#3a3a3a",
            borderRadius: "4px",
            padding: "4px",
        },
        shortcut: {
            opacity: 0.6,
        },
    };

    return (
        <div style={styles.contextMenu}>
            <div>
                {visibility.rename && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onRename}>
                            <span>Rename</span>
                            <span style={styles.shortcut}>F2</span>
                        </button>
                    </div>
                )}
                {visibility.focus && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onFocus}>
                            <span>Focus</span>
                            <span style={styles.shortcut}>F</span>
                        </button>
                    </div>
                )}
                {visibility.flipX && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onFlipX}>
                            Flip to X axis
                        </button>
                    </div>
                )}
                {visibility.flipZ && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onFlipZ}>
                            Flip to Z axis
                        </button>
                    </div>
                )}
                {(visibility.move || visibility.rotate) && (
                    <div style={styles.menuItem}>
                        <button style={styles.button}>Transform</button>
                        <div style={styles.submenu}>
                            {visibility.move && (
                                <div style={styles.menuItem}>
                                    <button style={styles.button} onClick={onMove}>
                                        <span>Move</span>
                                        <span style={styles.shortcut}>G</span>
                                    </button>
                                </div>
                            )}
                            {visibility.rotate && (
                                <div style={styles.menuItem}>
                                    <button style={styles.button} onClick={onRotate}>
                                        <span>Rotate</span>
                                        <span style={styles.shortcut}>R</span>
                                    </button>
                                </div>
                            )}
                        </div>
                    </div>
                )}
                {visibility.duplicate && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onDuplicate}>
                            <span>Duplicate</span>
                            <span style={styles.shortcut}>Ctrl + D</span>
                        </button>
                    </div>
                )}
                {visibility.copy && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onCopy}>
                            <span>Copy Objects</span>
                            <span style={styles.shortcut}>Ctrl + C</span>
                        </button>
                    </div>
                )}
                {visibility.paste && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onPaste}>
                            <span>Paste Objects</span>
                            <span style={styles.shortcut}>Ctrl + V</span>
                        </button>
                    </div>
                )}
                {visibility.modifier && (
                    <div style={styles.menuItem}>
                        <button style={styles.button}>Modifiers</button>
                    </div>
                )}
                {(visibility.group || visibility.array) && (
                    <div style={styles.menuItem}>
                        <button style={styles.button}>Group / Array</button>
                        <div style={styles.submenu}>
                            {visibility.group && (
                                <div style={styles.menuItem}>
                                    <button style={styles.button} onClick={onGroup}>
                                        <span>Group</span>
                                        <span style={styles.shortcut}>Ctrl + G</span>
                                    </button>
                                </div>
                            )}
                            {visibility.array && (
                                <div style={styles.menuItem}>
                                    <button style={styles.button} onClick={onArray}>
                                        Array
                                    </button>
                                </div>
                            )}
                        </div>
                    </div>
                )}
                {visibility.delete && (
                    <div style={styles.menuItem}>
                        <button style={styles.button} onClick={onDelete}>
                            <span>Delete</span>
                            <span style={styles.shortcut}>X</span>
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
};

export default ContextMenu;