48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import NotFoundPage from './NotFoundPage';
|
|
import AthleteMenu from './AthleteMenu';
|
|
import Medal from './Medal';
|
|
import Flag from './Flag';
|
|
import athletes from '../data/athletes';
|
|
|
|
class AthletePage extends React.Component {
|
|
render() {
|
|
const id = this.props.params.id;
|
|
const athlete = athletes.filter(athlete => athlete.id === id)[0];
|
|
if ( ! athlete) {
|
|
return <NotFoundPage />
|
|
}
|
|
const headerStyle = {
|
|
backgroundImage: `url(/img/${athlete.cover})`
|
|
};
|
|
|
|
return (
|
|
<div className="athlete-full">
|
|
<AthleteMenu />
|
|
<div className="athlete">
|
|
<header style={headerStyle} />
|
|
<div className="picture-container">
|
|
<img src={`/img/${athlete.image}`} />
|
|
<h2 className="name">{athlete.name}</h2>
|
|
</div>
|
|
<section className="description">
|
|
Olympic medalist from <strong><Flag code={athlete.country} showName="true" /></strong>,
|
|
born in {athlete.birth} (Find out more on <a href={athlete.link}>Wikipedia</a>).
|
|
</section>
|
|
<section className="medals">
|
|
<p>Winner of <string>{athlete.medals.length}</string> medals:</p>
|
|
<ul>{
|
|
athlete.medals.map((medal, i) => <Medal key={i} {...medal} />)
|
|
}</ul>
|
|
</section>
|
|
</div>
|
|
<div className="navigateBack">
|
|
<Link to="/">« Back to the index</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default AthletePage; |