// ** React Imports import { MouseEvent, useState, ReactNode } from 'react' // ** Next Import import Link from 'next/link' // ** MUI Imports import Box from '@mui/material/Box' import Menu from '@mui/material/Menu' import Divider from '@mui/material/Divider' import MenuItem from '@mui/material/MenuItem' import IconButton from '@mui/material/IconButton' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Type Imports import { OptionType, OptionsMenuType, OptionMenuItemType } from './types' // ** Hook Import import { useSettings } from 'src/@core/hooks/useSettings' const MenuItemWrapper = ({ children, option }: { children: ReactNode; option: OptionMenuItemType }) => { if (option.href) { return ( {children} ) } else { return <>{children} } } const OptionsMenu = (props: OptionsMenuType) => { // ** Props const { icon, options, menuProps, iconProps, leftAlignMenu, iconButtonProps } = props // ** State const [anchorEl, setAnchorEl] = useState(null) // ** Hook & Var const { settings } = useSettings() const { direction } = settings const handleClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget) } const handleClose = () => { setAnchorEl(null) } return ( <> {icon ? icon : } {options.map((option: OptionType, index: number) => { if (typeof option === 'string') { return ( {option} ) } else if ('divider' in option) { return option.divider && } else { return ( { handleClose() option.menuItemProps && option.menuItemProps.onClick ? option.menuItemProps.onClick(e) : null }} > {option.icon ? option.icon : null} {option.text} ) } })} ) } export default OptionsMenu