nodebb-plugin-ns-awards-recalbox
Version:
System for rewarding forum users. It allows admin to define set of awards that could be granted to users for special accomplishments.
41 lines (38 loc) • 1.58 kB
JavaScript
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
export default class AwardPickerItem extends React.Component {
render() {
let bodyClass = classNames('award-picker-item__body', {
'award-picker-item__body--selected': this.props.selected
});
let selectionPin;
if (this.props.selected) {
selectionPin =
<svg className="award-picker-item__pin" viewBox="0 0 2 8" width="100%" height="100%" preserveAspectRatio="none">
<g>
<path d="M 0 0 L 2 4 L 0 8 z"/>
</g>
</svg>;
}
return (
<div className="award-picker-item" onClick={() => this.props.clickListener()}>
<div className={bodyClass}>
<div className="award-picker-item__preview">
<img className="award-picker-item__image img-responsive" src={this.props.award.url}/>
</div>
<div className="award-picker-item__details">
<div className="award-picker-item__title">{this.props.award.name}</div>
<div className="award-picker-item__description">{this.props.award.desc}</div>
</div>
</div>
{selectionPin}
</div>
);
}
}
AwardPickerItem.propTypes = {
award : PropTypes.object.isRequired,
clickListener: PropTypes.func.isRequired,
selected : PropTypes.bool
};