Context Menu - Copy this React, Tailwind Component to your project

# Context Menu Component Prompt (MVC Pattern Functional) ## Context Design a **Context Menu** component for a React application using TypeScript and the MVC pattern. This component should display a menu to the user when triggered, typically by a right click or button press, and allow them to perform actions or select functions. ## Goals 1. Implement the **MVC pattern** in a functional style to manage the menu state, rendering, and interactions. 2. Provide a reusable and customizable context menu component that is accessible and can be integrated into various parts of the application. 3. Ensure the menu is lightweight, responsive, and user friendly. ## MVC Design Breakdown ### Model The **model** will manage the state of the context menu, including whether it is open or closed, the list of items, and the selected item. ### View The **view** will render the menu and its items dynamically based on the provided list of options. ### Controller The **controller** will handle user interactions such as opening the context menu, selecting an option, and closing the menu. ## Props Interface ```typescript interface ContextMenuProps { options: Array<{ id: string; // Unique identifier for each menu option label: string; // The text displayed for the option onClick: () => void; // Action to perform when the option is selected disabled?: boolean; // Whether the option is disabled icon?: React.ReactNode; // Optional icon to display with the option }>; triggerRef: React.RefObject<HTMLElement>; // Ref to the element that triggers the context menu position?: { x: number; y: number }; // Optional position to override default placement onClose?: () => void; // Callback when the menu is closed closeOnClickOutside?: boolean; // Whether to close the menu when clicked outside disabled?: boolean; // Disable the entire context menu }