import React, { Component } from "react"; import { FaPlay, FaStop } from "react-icons/fa"; class PlayContextMenu extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div style={styles.mainContainer}> {!this.props.isPlaying ? ( <div> <div style={styles.row} onClick={() => { this.props.play(false); }} > <FaPlay /> <div>From Beginning</div> </div> <div style={styles.row} onClick={() => { this.props.play(true); }} > <FaPlay /> <div>From Last Clicked Note</div> </div> </div> ) : ( <div> <div style={styles.row} onClick={() => { this.props.stop(); }} > <FaStop /> Stop </div> </div> )} </div> ); } } const styles = { mainContainer: { position: "absolute", padding: 10, display: "flex", flexDirection: "column", backgroundColor: "white", border: "2px solid lightgrey", borderRadius: 3, top: 20, left: 20, }, row: { flex: 1, whiteSpace: "nowrap", width: 200, display: "flex", margin: 3, justifyContent: "space-between", alignItems: "center", cursor: "pointer", }, }; export default PlayContextMenu;