38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
class MapperCard extends Component {
|
|
render = () => {
|
|
const { user } = this.props
|
|
|
|
return (
|
|
<div className="mapper">
|
|
<div className="mapperCard">
|
|
<div className="mapperImage">
|
|
<img src={ user.image } width="96" height="96" />
|
|
</div>
|
|
<div className="mapperName" title={ user.name }>
|
|
{ user.name }
|
|
</div>
|
|
<div className="mapperInfo">
|
|
<div className="mapperCreatedAt">Mapper since: { user.created_at }</div>
|
|
<div className="mapperGeneration">Generation: { user.generation }</div>
|
|
</div>
|
|
<div className="mapperMetadata">
|
|
<div className="metadataSection metadataMaps"><div>{ user.numMaps }</div>maps</div>
|
|
<div className="metadataSection metadataTopics"><div>{ user.numTopics }</div>topics</div>
|
|
<div className="metadataSection metadataSynapses"><div>{ user.numSynapses }</div>synapses</div>
|
|
<div className="clearfloat"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
MapperCard.propTypes = {
|
|
user: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default MapperCard
|