User page now running properly

client/homebrew/pages/userPage/brewItem/brewItem.jsx

@@ -1,19 +1,37 @@
 const React = require('react');
 const _     = require('lodash');
 const cx    = require('classnames');
+const moment = require('moment');
 
 const BrewItem = React.createClass({
 	getDefaultProps: function() {
 		return {
 			brew : {
+				title : '',
+				description : '',
 
+				authors : []
 			}
 		};
 	},
 
 	render : function(){
+		const brew = this.props.brew;
 		return <div className='brewItem'>
-			BrewItem Component Ready.
+			<h4>{brew.title}</h4>
+			<p className='description'><em>{brew.description}</em></p>
+			<hr />
+			<ul>
+				<li><strong>Authors: </strong> {brew.authors.join(', ')}</li>
+				<li>
+					<strong>Last updated: </strong>
+					{moment(brew.updatedAt).fromNow()}
+				</li>
+				<li><strong>Views: </strong> {brew.views} </li>
+			</ul>
+
+			<a href={`/share/${brew.shareId}`} target='_blank'>Share link</a>
+			{(!!brew.editId ? <a href={`/edit/${brew.editId}`} target='_blank'>Edit link</a> : null)}
 		</div>
 	}
 });

client/homebrew/pages/userPage/brewItem/brewItem.less

@@ -1,3 +1,19 @@
-.brewItem{
 
+.brewItem{
+	display                     : inline-block;
+	vertical-align              : top;
+	width                       : 33%;
+	margin-bottom               : 15px;
+	-webkit-column-break-inside : avoid;
+	page-break-inside           : avoid;
+	break-inside                : avoid;
+	p.description{
+		overflow      : hidden;
+		width         : 90%;
+		text-overflow : ellipsis;
+		white-space   : nowrap;
+	}
+	a{
+		margin-right : 10px;
+	}
 }