Skip to content

Instantly share code, notes, and snippets.

@chrisbodhi

chrisbodhi/card.jsx

Created Mar 1, 2015
Embed
What would you like to do?
var Card = React.createClass({
componentDidMount: function() {
$(document).foundation();
},
render: function() {
var cx = React.addons.classSet;
var titleClasses = cx({
'project-title': true,
'medium-centered': true,
'small-centered': true,
'columns': true,
'small-6 medium-12': this.props.data.markov,
'small-5 medium-9': this.props.data.mars,
'small-4 medium-9': this.props.data.textspiration
});
var taglineClasses = cx({
'tagline': true,
'medium-centered': true,
'small-centered': true,
'columns': true,
'small-6 medium-11': this.props.data.markov,
'small-6 medium-11': this.props.data.mars,
'small-5 medium-9': this.props.data.textspiration
});
return(
<div className="medium-4 columns">
<header className="small-11 small-centered columns">
<h3 className={titleClasses}>{this.props.data.title}</h3>
</header>
<div className="project-container" data-equalizer-watch>
<h5 className={taglineClasses}>{this.props.data.subtitle}</h5>
<div className="screenshot small-8 small-centered columns">
<a href={this.props.data.link} alt={this.props.data.alt} target="_new"><img src={this.props.data.image} /></a>
</div>
<p className="writeup small-10 small-centered columns text-justify">{this.props.data.description}</p>
<p className="tech small-10 small-centered columns text-justify">{this.props.data.techStack}</p>
<div className="row">
<Roles roles={this.props.data.roles} />
<Links links={this.props.data.links} />
</div>
</div>
</div>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.