p5.js-web-editor/client/modules/IDE/components/About.jsx

122 lines
4.2 KiB
React
Raw Normal View History

import React, { PropTypes } from 'react';
2016-08-22 18:35:59 +02:00
import InlineSVG from 'react-inlinesvg';
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');
2016-08-22 18:35:59 +02:00
import { browserHistory } from 'react-router';
class About extends React.Component {
constructor(props) {
super(props);
this.closeAboutModal = this.closeAboutModal.bind(this);
}
2016-09-28 18:09:42 +02:00
componentDidMount() {
this.refs.about.focus();
}
2016-08-22 18:35:59 +02:00
closeAboutModal() {
browserHistory.push(this.props.previousPath);
2016-08-22 18:35:59 +02:00
}
render() {
return (
2016-09-28 18:09:42 +02:00
<section className="about" ref="about" tabIndex="0">
2016-08-22 18:35:59 +02:00
<header className="about__header">
<h2 className="about__header-title">Welcome</h2>
2016-08-22 18:35:59 +02:00
<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"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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">
2016-08-22 18:35:59 +02:00
<a
href="https://github.com/processing/p5.js-web-editor"
target="_blank"
>Contribute</a>
</p>
<p className="about__footer-list">
2016-08-22 18:35:59 +02:00
<a
href="https://github.com/processing/p5.js-web-editor/issues/new"
target="_blank"
>Report a bug</a>
</p>
<p className="about__footer-list">
<a
href="https://twitter.com/p5xjs?lang=en"
target="_blank"
>Twitter</a>
2016-08-22 18:35:59 +02:00
</p>
<button className="about__ok-button" onClick={this.closeAboutModal}>OK!</button>
2016-08-22 18:35:59 +02:00
</div>
2016-09-28 18:09:42 +02:00
</section>
2016-08-22 18:35:59 +02:00
);
}
}
About.propTypes = {
previousPath: PropTypes.string.isRequired
};
2016-08-22 18:35:59 +02:00
export default About;