132 lines
4.6 KiB
JavaScript
132 lines
4.6 KiB
JavaScript
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;
|