- return <div className="participation">
- {user.participation.map(p => <div key={p.id}>
- <Button
- onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
- variant="link"
- >
- {p.tournament.title}
- </Button>
- </div>)}
- </div>;
+ return <Table className="participation">
+ <thead>
+ <tr>
+ <th>{i18n.t('participants.tournament')}</th>
+ <th>{i18n.t('participants.roles')}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {user.participation.map(p => <tr key={p.id}>
+ <td>
+ <Button
+ onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
+ variant="link"
+ >
+ {p.tournament.title}
+ </Button>
+ </td>
+ <td>
+ {p.roles ? p.roles.map((role, index) =>
+ <span key={role}>
+ {index === 0 ? '' : ', '}
+ {i18n.t(`participants.roleNames.${role}`)}
+ </span>
+ ) : null}
+ </td>
+ </tr>)}
+ </tbody>
+ </Table>;