72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
|
|
|
|
export default function UserStatistics (props) {
|
|
const { user } = props
|
|
const days = user.total_duration.match(/day/g)
|
|
? `${user.total_duration.split(',')[0]},`
|
|
: '0 days,'
|
|
let duration = user.total_duration.match(/day/g)
|
|
? user.total_duration.split(', ')[1]
|
|
: user.total_duration
|
|
duration = `${duration.split(':')[0]}h ${duration.split(':')[1]}min`
|
|
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>
|
|
<div>{`workout${user.nb_activities === 1 ? '' : 's'}`}</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-road fa-3x fa-color" />
|
|
</div>
|
|
<div className="col-9 text-right">
|
|
<div className="huge">
|
|
{Number(user.total_distance).toFixed(2)}
|
|
</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">{days}</div>
|
|
<div>{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.nb_sports}</div>
|
|
<div>{`sport${user.nb_sports === 1 ? '' : 's'}`}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|