Full class tables workign with background

client/homebrew/statusbar/statusbar.jsx

@@ -2,21 +2,73 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var Logo = require('naturalCrit/logo/logo.jsx');
+
 var Statusbar = React.createClass({
 
 	getDefaultProps: function() {
 		return {
+			editId: null,
+			shareId : null,
+			isPending : false,
 
+			info : null
 		};
 	},
 
-	render : function(){
-		var self = this;
-		return(
-			<div className='statusbar'>
-				Statusbar Ready!
+	renderInfo : function(){
+		//render last update?
+		//number of times viewed?
+	},
+
+	renderNewButton  : function(){
+		if(this.props.editId) return null;
+
+		return <a className='newButton' target='_blank' href='/homebrew/new'>
+			<i className='fa fa-new' />
+			New
+		</a>
+	},
+
+	renderLinks : function(){
+		if(!this.props.editId) return null;
+
+		return [
+			<div className='' key='edit'>
+				<span>Edit Link</span>
+				<input type='text' readOnly value={this.props.editId} />
+			</div>,
+			<div className='' key='share'>
+				<a herf={'/share/' + this.props.shareId}>Share Link</a>
+				<input type='text' readOnly value={this.props.shareId} />
 			</div>
-		);
+		]
+	},
+
+	renderStatus : function(){
+		if(!this.props.editId) return null;
+
+		var text = 'Saved.'
+		if(this.props.isPending){
+			text = 'Saving...'
+		}
+		return <div className='savingStatus'>
+			{text}
+		</div>
+	},
+
+	render : function(){
+		console.log(this.props);
+		return <div className='statusbar'>
+			<Logo />
+			Statusbar Ready!
+
+			<div className='controls'>
+				{this.renderLinks()}
+				{this.renderStatus()}
+				{this.renderNewButton()}
+			</div>
+		</div>
 	}
 });
 

client/homebrew/statusbar/statusbar.less

@@ -1,3 +1,12 @@
 .statusbar{
+	font-size        : 1.8em;
+			color            : white;
+	svg{
+		vertical-align : middle;
+		height         : 1em;
+		margin-right   : 0.2em;
+		cursor         : pointer;
+		fill           : white;
+	}
 
 }