p5.js-web-editor/client/components/PreviewNav.jsx
Basile Pesin 996a1b988a Fixes ()
* Got the basis covered, now I need to style all this

* Corrected and upgraded Share window

* Changed the routes again, and set correct design

* Made some of the requested changes

* Removed PreviewFrame errors

* Redesigned Preview Header

* Corrected style of the FullView

* Corrected most of the css mistakes

* Corrected logo size
2018-10-18 14:10:37 -04:00

37 lines
1.2 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
import { Link } from 'react-router';
import InlineSVG from 'react-inlinesvg';
const logoUrl = require('../images/p5js-logo-small.svg');
const editorUrl = require('../images/code.svg');
const PreviewNav = ({ owner, project }) => (
<nav className="nav">
<div className="nav__items-left">
<div className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" />
</div>
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
<p className="toolbar__project-owner">by</p>
<Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
</div>
<div className="nav__items-right">
<Link to={`/${owner.username}/sketches/${project.id}`}>
<InlineSVG className="preview-nav__editor-svg" src={editorUrl} />
</Link>
</div>
</nav>
);
PreviewNav.propTypes = {
owner: PropTypes.shape({
username: PropTypes.string.isRequired
}).isRequired,
project: PropTypes.shape({
name: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
}).isRequired,
};
export default PreviewNav;