FitTrackee/mpwo_client/src/components/Dashboard/ActivityCard.jsx
2018-05-10 17:21:25 +02:00

31 lines
921 B
JavaScript

import React from 'react'
import { Link } from 'react-router-dom'
export default function ActivityCard (props) {
const { activity, sports } = props
return (
<div className="card activity-card text-center">
<div className="card-header">
<Link to={`/activities/${activity.id}`}>
{sports.filter(sport => sport.id === activity.sport_id)
.map(sport => sport.label)} -{' '}
{activity.activity_date}
</Link>
</div>
<div className="card-body">
<p>
<i className="fa fa-calendar" aria-hidden="true" />{' '}
Start at {activity.activity_date}
</p>
<p>
<i className="fa fa-clock-o" aria-hidden="true" />{' '}
Duration: {activity.duration} -{' '}
<i className="fa fa-road" aria-hidden="true" />{' '}
Distance: {activity.distance} km
</p>
</div>
</div>
)
}