import React from 'react'; var Isvg = require('react-inlinesvg'); var playUrl = require('../../../images/play.svg'); var logoUrl = require('../../../images/p5js-logo.svg'); var stopUrl = require('../../../images/stop.svg'); var preferencesUrl = require('../../../images/preferences.svg'); var classNames = require('classnames'); class Toolbar extends React.Component { render() { let playButtonClass = classNames({ "toolbar__play-button": true, "toolbar__play-button--selected": this.props.isPlaying }); let stopButtonClass = classNames({ "toolbar__stop-button": true, "toolbar__stop-button--selected": !this.props.isPlaying }); let preferencesButtonClass = classNames({ "toolbar__preferences-button": true, "toolbar__preferences-button--selected": this.props.isPreferencesShowing }); return ( <div className="toolbar"> <img className="toolbar__logo" src={logoUrl} alt="p5js Logo"/> <button className={playButtonClass} onClick={this.props.startSketch}> <Isvg src={playUrl} alt="Play Sketch" /> </button> <button className={stopButtonClass} onClick={this.props.stopSketch}> <Isvg src={stopUrl} alt="Stop Sketch" /> </button> <button className={preferencesButtonClass} onClick={this.props.openPreferences}> <Isvg src={preferencesUrl} alt="Show Preferences" /> </button> </div> ); } } export default Toolbar;