Proyectos de Subversion LeadersLinked - SPA

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

const StyledOptionsButton = styled(IconButton)`
  position: absolute !important;
  right: ${(props) => props.right || '0'};
  top: ${(props) => props.top || '50%'};
  z-index: 100;
  ${(props) =>
    !props.top &&
    css`
      transform: translateY(-50%);
    `}
`

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

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

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

  return (
    <>
      <StyledOptionsButton
        right={right}
        top={top}
        onClick={handleClick}
        aria-controls={open ? 'account-menu' : undefined}
        aria-haspopup='true'
        aria-expanded={open ? 'true' : undefined}
      >
        <MoreVertIcon />
      </StyledOptionsButton>
      <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