X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fusers%2FParticipation.js;h=d0d5d689658dc9f69608d1cf7ab41cae79d1f94a;hb=d611bc90eab94fbce54e9e5485f15c20abf1ad31;hp=e45fcf668e2fcc26c1bb0121ea6a77bc36a54e68;hpb=80befc9403845a0f41f5f7e766938b0bbf607d7e;p=alttp.git

diff --git a/resources/js/components/users/Participation.js b/resources/js/components/users/Participation.js
index e45fcf6..d0d5d68 100644
--- a/resources/js/components/users/Participation.js
+++ b/resources/js/components/users/Participation.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, Button } from 'react-bootstrap';
+import { Alert, Button, Table } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -14,16 +14,34 @@ const Participation = ({ user }) => {
 			{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>;
+	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>;
 };
 
 Participation.propTypes = {