48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import { apiUrl } from '../../utils'
|
|
|
|
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">
|
|
<div className="row">
|
|
{activity.map && (
|
|
<div className="col">
|
|
<img
|
|
alt="Map"
|
|
src={`${apiUrl}activities/map/${activity.map}` +
|
|
`?${Date.now()}`}
|
|
className="img-fluid"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="col">
|
|
<p>
|
|
<i className="fa fa-clock-o" aria-hidden="true" />{' '}
|
|
Duration: {activity.duration}
|
|
{activity.map ? (
|
|
<span><br /><br /></span>
|
|
) : (
|
|
' - '
|
|
)}
|
|
<i className="fa fa-road" aria-hidden="true" />{' '}
|
|
Distance: {activity.distance} km
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|