e140702784
* start to create asset list * begin refactoring overlay component to remove duplicate code * refactoring of overlays, asset list styles * changes to add size to asset list * fixes to asset list * handle case in which a user hasn't uploaded any assets * fix bug in which asset list only grabbed first asset * remove console.log * update overlay exit styling to use icon mixin
101 lines
3.4 KiB
JavaScript
101 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
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');
|
|
|
|
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/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 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>
|
|
);
|
|
}
|
|
|
|
export default About;
|