72 lines
2.3 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
2018-06-12 11:47:01 +02:00
const days = user.total_duration.match(/day/g)
? `${user.total_duration.split(',')[0]},`
2018-06-07 22:44:52 +02:00
: '0 days,'
2018-06-12 11:47:01 +02:00
let duration = user.total_duration.match(/day/g)
? user.total_duration.split(', ')[1]
: user.total_duration
2018-06-07 22:44:52 +02:00
duration = `${duration.split(':')[0]}h ${duration.split(':')[1]}min`
2018-06-05 19:37:10 +02:00
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-12 11:47:01 +02:00
<div>{`workout${user.nb_activities === 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">
2018-06-12 11:47:01 +02:00
{Number(user.total_distance).toFixed(2)}
2018-06-05 19:37:10 +02:00
</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">
2018-06-07 22:44:52 +02:00
<div className="huge">{days}</div>
<div>{duration}</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-tags fa-3x fa-color" />
</div>
<div className="col-9 text-right">
2018-06-12 11:47:01 +02:00
<div className="huge">{user.nb_sports}</div>
<div>{`sport${user.nb_sports === 1 ? '' : 's'}`}</div>
2018-06-05 19:37:10 +02:00
</div>
</div>
</div>
</div>
</div>
)
}