Rev 6938 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import IconButton from '@mui/material/IconButton'
import MoreVertIcon from '@mui/icons-material/MoreVert'
const Options = ({ options }) => {
const [isShowMenu, setIsShowMenu] = useState(false)
const toggleOptions = () => {
setIsShowMenu(!isShowMenu)
}
return (
<div className="header-options">
<IconButton onClick={toggleOptions}>
<MoreVertIcon />
<Options.Menu
options={options}
onClose={toggleOptions}
show={isShowMenu}
/>
</IconButton>
</div>
)
}
const Menu = ({ options, show, onClose }) => {
return (
<ul className={`feed-options ${show ? 'active' : ''}`}>
{options.map((option, index) => (
<li key={index}>
<button
className="btn option-btn"
onClick={() => {
option.action()
onClose()
}}
>
{option.label}
</button>
</li>
))}
</ul>
)
}
Options.Menu = Menu
export default Options