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

102 lines
3.4 KiB
React
Raw Normal View History

import React from 'react';
2016-08-22 16:35:59 +00:00
import InlineSVG from 'react-inlinesvg';
const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
const playUrl = require('../../../images/play.svg');
const asteriskUrl = require('../../../images/p5-asterisk.svg');
2016-08-22 16:35:59 +00:00
function About(props) {
return (
<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/learn/"
target="_blank"
rel="noopener noreferrer"
>
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
Learn</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 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>
</div>
</div>
);
2016-08-22 16:35:59 +00:00
}
export default About;