2016-05-11 19:19:37 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
2016-05-12 23:22:54 +02:00
|
|
|
var Isvg = require('react-inlinesvg');
|
2016-05-11 19:19:37 +02:00
|
|
|
var playUrl = require('../../../images/play.svg');
|
2016-05-11 21:31:17 +02:00
|
|
|
var logoUrl = require('../../../images/p5js-logo.svg');
|
2016-05-12 23:22:54 +02:00
|
|
|
var stopUrl = require('../../../images/stop.svg');
|
2016-05-12 23:40:49 +02:00
|
|
|
var classNames = require('classnames');
|
2016-05-11 19:19:37 +02:00
|
|
|
|
|
|
|
class Toolbar extends React.Component {
|
|
|
|
render() {
|
2016-05-12 23:40:49 +02:00
|
|
|
let playButtonClass = classNames({
|
|
|
|
"toolbar__play-button": true,
|
2016-06-10 01:30:59 +02:00
|
|
|
"toolbar__play-button--selected": this.props.isPlaying
|
2016-05-12 23:40:49 +02:00
|
|
|
});
|
2016-06-08 22:35:59 +02:00
|
|
|
let stopButtonClass = classNames({
|
|
|
|
"toolbar__stop-button": true,
|
2016-06-10 01:30:59 +02:00
|
|
|
"toolbar__stop-button--selected": !this.props.isPlaying
|
2016-06-08 22:35:59 +02:00
|
|
|
});
|
2016-05-12 23:40:49 +02:00
|
|
|
|
2016-05-11 19:19:37 +02:00
|
|
|
return (
|
|
|
|
<div className="toolbar">
|
2016-06-03 23:30:40 +02:00
|
|
|
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo"/>
|
2016-06-08 22:35:59 +02:00
|
|
|
<button className={playButtonClass} onClick={this.props.startSketch}>
|
2016-05-12 23:22:54 +02:00
|
|
|
<Isvg src={playUrl} alt="Play Sketch" />
|
2016-06-08 22:35:59 +02:00
|
|
|
</button>
|
|
|
|
<button className={stopButtonClass} onClick={this.props.stopSketch}>
|
|
|
|
<Isvg src={stopUrl} alt="Stop Sketch" />
|
|
|
|
</button>
|
2016-05-11 19:19:37 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-06-08 22:35:59 +02:00
|
|
|
export default Toolbar;
|