Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Menu, MenuItem, IconButton } from '@mui/material'
import { MoreVert } from '@mui/icons-material'

const Options = ({ options = [], right = '.5rem', top = '.5rem' }) => {
  const [anchorEl, setAnchorEl] = useState(null)
  const open = Boolean(anchorEl)

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  if (!options.length) {
    return null
  }

  return (
    <>
      <IconButton
        sx={{
          position: 'absolute',
          right,
          top,
          zIndex: 100,
          transform: top ? 'none' : 'translateY(-50%)'
        }}
        right={right}
        top={top}
        onClick={handleClick}
        aria-controls={open ? 'account-menu' : ''}
        aria-haspopup='true'
        aria-expanded={open ? 'true' : ''}
      >
        <MoreVert />
      </IconButton>
      <Menu
        anchorEl={anchorEl}
        id='account-menu'
        open={open}
        onClose={handleClose}
        onClick={handleClose}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      >
        {options.map((option, index) => (
          <MenuItem
            key={index}
            onClick={() => {
              option.action()
              handleClose()
            }}
          >
            {option.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  )
}

export default Options