SoundWave/imports/ui/Result.jsx

import React, {Component, PropTypes} from 'react';
import Video from './Video';

export default class Result extends Component {
	render() {
		return (
			<a className="result-link" onClick={this.props.click}>
				<img src={this.props.result.thumb.url} alt="thumbnail" className="result-thumb"
					 height={this.props.result.thumb.height / 2}
					 width={this.props.result.thumb.width / 2}/>
				<div className="result-info">
					<div className="result-head" title={this.props.result.title}>
						<div className="result-title">{this.props.result.title}</div>
						<div className="result-duration">{this.props.result.duration}</div>
					</div>
					<div className="result-stats">
						<div className="result-views" title={this.props.result.stats.viewCount}>
							<i className="fa fa-eye"/> {this.props.result.stats.viewCount}
						</div>
						<div className="result-likes" title={this.props.result.stats.likeCount}>
							<i className="fa fa-thumbs-o-up"/> {this.props.result.stats.likeCount}
						</div>
						<div className="result-dislikes" title={this.props.result.stats.dislikeCount}>
							<i className="fa fa-thumbs-o-down"/> {this.props.result.stats.dislikeCount}
						</div>
						<div className="result-comments" title={this.props.result.stats.commentCount}>
							<i className="fa fa-comments-o"/> {this.props.result.stats.commentCount}
						</div>
						<div className="result-favorites" title={this.props.result.stats.favoriteCount}>
							<i className="fa fa-star-o"/> {this.props.result.stats.favoriteCount}
						</div>
					</div>
				</div>
			</a>
		);
	}
}

Result.propTypes = {
	result: PropTypes.instanceOf(Video).isRequired,
	click: PropTypes.func
};