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

105 lines
3.5 KiB
React
Raw Normal View History

import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
2020-04-29 22:34:37 +00:00
import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
// import PlayIcon from '../../../images/play.svg';
import AsteriskIcon from '../../../images/p5-asterisk.svg';
2016-08-22 16:35:59 +00:00
function About(props) {
const { t } = useTranslation();
return (
<div className="about__content">
<Helmet>
<title> {t('About.TitleHelmet')} </title>
</Helmet>
<div className="about__content-column">
<SquareLogoIcon className="about__logo" role="img" aria-label={t('Common.p5logoARIA')} focusable="false" />
</div>
<div className="about__content-column">
<h3 className="about__content-column-title">{t('About.NewP5')}</h3>
<p className="about__content-column-list">
<a
href="https://p5js.org/examples/"
target="_blank"
rel="noopener noreferrer"
>
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
{t('About.Examples')}
2018-05-05 00:22:39 +00:00
</a>
</p>
<p className="about__content-column-list">
<a
href="https://p5js.org/learn/"
target="_blank"
rel="noopener noreferrer"
>
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
{t('About.Learn')}
2018-05-05 00:22:39 +00:00
</a>
</p>
</div>
<div className="about__content-column">
<h3 className="about__content-column-title">{t('About.Resources')}</h3>
<p className="about__content-column-list">
<a
href="https://p5js.org/libraries/"
target="_blank"
rel="noopener noreferrer"
>
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
{t('About.Libraries')}
2018-05-05 00:22:39 +00:00
</a>
</p>
<p className="about__content-column-list">
<a
href="https://p5js.org/reference/"
target="_blank"
rel="noopener noreferrer"
>
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
{t('Nav.Help.Reference')}
2018-05-05 00:22:39 +00:00
</a>
</p>
<p className="about__content-column-list">
<a
2018-08-20 16:25:48 +00:00
href="https://discourse.processing.org/"
target="_blank"
rel="noopener noreferrer"
>
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
{t('About.Forum')}
2018-05-05 00:22:39 +00:00
</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"
>{t('About.Contribute')}
2018-05-05 00:22:39 +00:00
</a>
</p>
<p className="about__footer-list">
<a
href="https://github.com/processing/p5.js-web-editor/issues/new"
target="_blank"
rel="noopener noreferrer"
>{t('About.Report')}
2018-05-05 00:22:39 +00:00
</a>
</p>
<p className="about__footer-list">
<a
href="https://twitter.com/p5xjs?lang=en"
target="_blank"
rel="noopener noreferrer"
2018-05-05 00:22:39 +00:00
>Twitter
</a>
</p>
</div>
</div>
);
2016-08-22 16:35:59 +00:00
}
export default About;