import React, { PropTypes } from 'react'; import InlineSVG from 'react-inlinesvg'; import { browserHistory } from 'react-router'; const exitUrl = require('../../../images/exit.svg'); const squareLogoUrl = require('../../../images/p5js-square-logo.svg'); const playUrl = require('../../../images/play.svg'); const asteriskUrl = require('../../../images/p5-asterisk.svg'); class About extends React.Component { constructor(props) { super(props); this.closeAboutModal = this.closeAboutModal.bind(this); } componentDidMount() { this.aboutSection.focus(); } closeAboutModal() { browserHistory.push(this.props.previousPath); } render() { return ( <section className="about" ref={(element) => { this.aboutSection = element; }} tabIndex="0"> <header className="about__header"> <h2 className="about__header-title">Welcome</h2> <button className="about__exit-button" onClick={this.closeAboutModal}> <InlineSVG src={exitUrl} alt="Close About Overlay" /> </button> </header> <div className="about__content"> <div className="about__content-column"> <InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" /> <p className="about__play-video"> <a href="http://hello.p5js.org/" target="_blank" rel="noopener noreferrer" > <InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" /> Play hello! video</a> </p> </div> <div className="about__content-column"> <h3 className="about__content-column-title">New to p5.js?</h3> <p className="about__content-column-list"> <a href="https://p5js.org/examples/" target="_blank" rel="noopener noreferrer" > <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" /> Examples</a> </p> <p className="about__content-column-list"> <a href="https://p5js.org/tutorials/" target="_blank" rel="noopener noreferrer" > <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" /> Tutorials</a> </p> </div> <div className="about__content-column"> <h3 className="about__content-column-title">Resources</h3> <p className="about__content-column-list"> <a href="https://p5js.org/libraries/" target="_blank" rel="noopener noreferrer" > <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" /> Libraries</a> </p> <p className="about__content-column-list"> <a href="https://p5js.org/reference/" target="_blank" rel="noopener noreferrer" > <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" /> Reference</a> </p> <p className="about__content-column-list"> <a href="https://forum.processing.org/two/" target="_blank" rel="noopener noreferrer" > <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" /> Forum</a> </p> </div> </div> <div className="about__footer"> <p className="about__footer-list"> <a href="https://github.com/processing/p5.js-web-editor" target="_blank" rel="noopener noreferrer" >Contribute</a> </p> <p className="about__footer-list"> <a href="https://github.com/processing/p5.js-web-editor/issues/new" target="_blank" rel="noopener noreferrer" >Report a bug</a> </p> <p className="about__footer-list"> <a href="https://twitter.com/p5xjs?lang=en" target="_blank" rel="noopener noreferrer" >Twitter</a> </p> <button className="about__ok-button" onClick={this.closeAboutModal}>OK!</button> </div> </section> ); } } About.propTypes = { previousPath: PropTypes.string.isRequired }; export default About;