Initial functionality pass

client/homebrew/navbar/metadata.navitem.jsx

@@ -0,0 +1,71 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+
+const MetadataNav = createClass({
+	DisplayName     : 'MetadataNav',
+	getDefaultProps : function() {
+		return {
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			showDropdown : false
+		};
+	},
+
+	componentDidMount : function() {
+	},
+
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	getAuthors : function(){
+		if(!this.props.brew.authors) return 'No authors';
+		return this.props.brew.authors.join(', ');
+	},
+
+	getTags : function(){
+		if(!this.props.brew.tags) return 'No tags';
+		return this.props.brew.tags.join(', ');
+	},
+
+	getSystems : function(){
+		if(!this.props.brew.systems) return 'No systems';
+		return this.props.brew.systems.join(', ');
+	},
+
+	renderDropdown : function(){
+		if(!this.state.showDropdown) return null;
+
+		return <div className='dropdown'>
+			<h4>Description</h4>
+			<p>{this.props.brew.description || 'No description.'}</p>
+			<h4>Authors</h4>
+			<p>{this.getAuthors()}</p>
+			<h4>Tags</h4>
+			<p>{this.getTags()}</p>
+			<h4>Systems</h4>
+			<p>{this.getSystems()}</p>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			METADATA
+			{this.renderDropdown()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = MetadataNav;