X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fusers%2FProfile.js;h=b4c40605abbdb06e0027e966d9e00b89c7d53a22;hb=35d1ce20e64f3373d74816ed1bf9440b4213fa1a;hp=10c70dbf92bb4037a8ae2dbc96ab2fae22829c6d;hpb=beccf752aafd468c3753c6d48ae30bccd946c3b9;p=alttp.git

diff --git a/resources/js/components/users/Profile.js b/resources/js/components/users/Profile.js
index 10c70db..b4c4060 100644
--- a/resources/js/components/users/Profile.js
+++ b/resources/js/components/users/Profile.js
@@ -1,22 +1,35 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Col, Container, Row } from 'react-bootstrap';
+import { Alert, Button, Col, Container, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
 import Box from './Box';
+import Records from './Records';
+import EditNicknameButton from './EditNicknameButton';
 import EditStreamLinkButton from './EditStreamLinkButton';
 import Participation from './Participation';
 import Icon from '../common/Icon';
 import i18n from '../../i18n';
 
 const Profile = ({ user }) => <Container>
-	<h1>{user.username}</h1>
+	<h1>
+		{user.nickname || user.username}
+		{' '}
+		<EditNicknameButton user={user} />
+	</h1>
+	{user.random_quote && user.random_quote.comment ?
+		<Alert className="quote-alert" variant="dark">
+			<blockquote className="blockquote mb-0">
+				{user.random_quote.comment}
+			</blockquote>
+		</Alert>
+	: null}
 	<Row>
-		<Col md={6}>
+		<Col md={6} className="mb-5">
 			<h2>{i18n.t('users.discordTag')}</h2>
 			<Box discriminator user={user} />
 		</Col>
-		<Col md={6}>
+		<Col md={6} className="mb-5">
 			<h2>{i18n.t('users.streamLink')}</h2>
 			<p>
 				{user.stream_link ?
@@ -36,7 +49,23 @@ const Profile = ({ user }) => <Container>
 				<EditStreamLinkButton user={user} />
 			</p>
 		</Col>
-		<Col md={12}>
+		<Col md={6} className="mb-5">
+			<h2>{i18n.t('users.tournamentRecords')}</h2>
+			<Records
+				first={user.tournament_first_count}
+				second={user.tournament_second_count}
+				third={user.tournament_third_count}
+			/>
+		</Col>
+		<Col md={6} className="mb-5">
+			<h2>{i18n.t('users.roundRecords')}</h2>
+			<Records
+				first={user.round_first_count}
+				second={user.round_second_count}
+				third={user.round_third_count}
+			/>
+		</Col>
+		<Col md={12} className="mb-5">
 			<h2>{i18n.t('users.tournaments')}</h2>
 			<Participation user={user} />
 		</Col>
@@ -45,9 +74,19 @@ const Profile = ({ user }) => <Container>
 
 Profile.propTypes = {
 	user: PropTypes.shape({
+		nickname: PropTypes.string,
 		participation: PropTypes.arrayOf(PropTypes.shape({
 		})),
+		random_quote: PropTypes.shape({
+			comment: PropTypes.string,
+		}),
+		round_first_count: PropTypes.number,
+		round_second_count: PropTypes.number,
+		round_third_count: PropTypes.number,
 		stream_link: PropTypes.string,
+		tournament_first_count: PropTypes.number,
+		tournament_second_count: PropTypes.number,
+		tournament_third_count: PropTypes.number,
 		username: PropTypes.string,
 	}),
 };