import React from 'react' ; import cx from 'classnames' ; import { Icon , SemanticICONS } from 'semantic-ui-react' ; import styles from './styles.scss' ; import Tooltip from '../../Tooltip' ; export type PlayOptionControlProps = { name : string ; icon : SemanticICONS ; enabled ? : boolean ; onToggle ? : ( ) => void ; } ; const PlayOptionControl = ( { name , icon , enabled = true , onToggle } ) => ( < Tooltip content = { name } position = 'top center' trigger = { < Icon className = { cx ( styles . play_option_icon , { disabled : ! enabled } ) } name = { icon } onClick = { onToggle } size = 'large' / > } />); export type PlayOptionsProps = { playOptions : PlayOptionControlProps [ ] ; } ; const PlayOptions = ( { playOptions } ) => ( < div className = { styles . play_options } > { playOptions . map ( ( playOption , i ) => < PlayOptionControl { ... playOption } key = { i } / > ) } < /div>); export default PlayOptions ;