p5.js-web-editor/client/components/Nav.js

64 lines
1.7 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
2016-06-24 00:29:55 +02:00
import { Link } from 'react-router';
function Nav(props) {
return (
2016-07-14 23:20:44 +02:00
<nav className="nav" role="navigation" title="main-navigation">
2016-07-13 17:59:47 +02:00
<ul className="nav__items-left" title="project-menu">
<li className="nav__item">
2016-07-12 18:25:48 +02:00
<a
className="nav__new"
onClick={props.createProject}
>
New
2016-07-12 18:25:48 +02:00
</a>
</li>
<li className="nav__item">
2016-07-12 18:25:48 +02:00
<a
className="nav__save"
onClick={props.saveProject}
>
Save
2016-07-12 18:25:48 +02:00
</a>
</li>
2016-07-01 17:30:40 +02:00
<li className="nav__item">
<p className="nav__open">
<Link to="/sketches">
Open
</Link>
</p>
</li>
2016-07-15 19:11:50 +02:00
<li className="nav__item">
<a className="nav__export" onClick={props.exportProjectAsZip}>
Export (zip)
</a>
</li>
2016-07-15 19:36:33 +02:00
<li className="nav__item" onClick={props.cloneProject}>
2016-07-15 19:11:50 +02:00
<a className="nav__clone">
Clone
</a>
</li>
</ul>
2016-07-13 17:59:47 +02:00
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
{props.user.authenticated && <p>Hello, {props.user.username}!</p>}
{!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
</li>
</ul>
</nav>
);
2016-06-24 00:29:55 +02:00
}
Nav.propTypes = {
createProject: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,
2016-07-15 19:11:50 +02:00
exportProjectAsZip: PropTypes.func.isRequired,
2016-07-15 19:36:33 +02:00
cloneProject: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired,
username: PropTypes.string
}).isRequired
};
2016-06-24 00:29:55 +02:00
export default Nav;