65 lines
2.0 KiB
React
Raw Normal View History

2018-06-05 19:37:10 +02:00
import React from 'react'
export default function UserStatistics (props) {
const { user } = props
return (
<div className="row">
<div className="col">
<div className="card activity-card">
<div className="card-body row">
<div className="col-3">
<i className="fa fa-calendar fa-3x fa-color" />
</div>
<div className="col-9 text-right">
<div className="huge">{user.nbActivities}</div>
2018-06-07 13:16:52 +02:00
<div>{`workout${user.nbActivities !== 1 && 's'}`}</div>
2018-06-05 19:37:10 +02:00
</div>
</div>
</div>
</div>
<div className="col">
<div className="card activity-card">
<div className="card-body row">
<div className="col-3">
<i className="fa fa-road fa-3x fa-color" />
</div>
<div className="col-9 text-right">
<div className="huge">
{Math.round(user.totalDistance * 100) / 100}
</div>
<div>km</div>
</div>
</div>
</div>
</div>
<div className="col">
<div className="card activity-card">
<div className="card-body row">
<div className="col-3">
<i className="fa fa-clock-o fa-3x fa-color" />
</div>
<div className="col-9 text-right">
<div className="huge">{user.totalDuration}</div>
<div>total duration</div>
</div>
</div>
</div>
</div>
<div className="col">
<div className="card activity-card">
<div className="card-body row">
<div className="col-3">
<i className="fa fa-tags fa-3x fa-color" />
</div>
<div className="col-9 text-right">
<div className="huge">{user.nbSports}</div>
<div>{`sport${user.nbSports === 1 ? '' : 's'}`}</div>
</div>
</div>
</div>
</div>
</div>
)
}