context-menu.tsx

context-menu.tsx

'use client'
/**
 * ContextMenu Component
 */
import { css } from 'styled-system/css'

function ContextMenu({ children, pos, onClose }: { children: React.ReactNode; pos: { x: number; y: number }; onClose?: () => void }) {
    return (
        <div
            className={css({
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                zIndex: 9999
            })}
            onClick={onClose?.bind(null)}
        >
            <div
                className={css({
                    position: 'relative',
                    w: '100vw',
                    h: '100vh'
                })}
            >
                <div
                    className={css({
                        position: 'absolute'
                    })}
                    style={{
                        top: 0 + pos.y + 'px',
                        left: 0 + pos.x + 'px'
                    }}
                >
                    {children}
                </div>
            </div>
        </div>
    )
}

ContextMenu.displayName = 'ContextMenuExt'

export default ContextMenu

// EOF