import React from 'react'; import classNames from 'classnames'; import styles from './Menu.module.css'; export default function Menu({ options = [], selectedOption, className, float, align = 'left', optionClassName, selectedClassName, onSelect = () => {}, }) { return ( <div className={classNames(styles.menu, className, { [styles.float]: float, [styles.top]: float === 'top', [styles.bottom]: float === 'bottom', [styles.left]: align === 'left', [styles.right]: align === 'right', })} > {options .filter(({ hidden }) => !hidden) .map(option => { const { label, value, className: customClassName, render } = option; return render ? ( render(option) ) : ( <div key={value} className={classNames(styles.option, optionClassName, customClassName, { [selectedClassName]: selectedOption === value, })} onClick={e => onSelect(value, e)} > {label} </div> ); })} </div> ); }