+import PropTypes from 'prop-types';
+import React from 'react';
+import { Alert, Button } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import i18n from '../../i18n';
+
+const Participation = ({ user }) => {
+ const navigate = useNavigate();
+
+ if (!user || !user.participation || !user.participation.length) {
+ return <Alert variant="info">
+ {i18n.t('users.participationEmpty')}
+ </Alert>;
+ }
+ 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>;
+};
+
+Participation.propTypes = {
+ user: PropTypes.shape({
+ participation: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.number,
+ })),
+ }),
+};
+
+export default withTranslation()(Participation);