]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/users/Profile.js
e2fe2e790be5e3739a52da8e266d0212b8937ac8
[alttp.git] / resources / js / components / users / Profile.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Col, Container, Row } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
5
6 import Box from './Box';
7 import Records from './Records';
8 import EditStreamLinkButton from './EditStreamLinkButton';
9 import Participation from './Participation';
10 import Icon from '../common/Icon';
11 import i18n from '../../i18n';
12
13 const Profile = ({ user }) => <Container>
14         <h1>{user.username}</h1>
15         <Row>
16                 <Col md={6} className="mb-5">
17                         <h2>{i18n.t('users.discordTag')}</h2>
18                         <Box discriminator user={user} />
19                 </Col>
20                 <Col md={6} className="mb-5">
21                         <h2>{i18n.t('users.streamLink')}</h2>
22                         <p>
23                                 {user.stream_link ?
24                                         <Button
25                                                 href={user.stream_link}
26                                                 target="_blank"
27                                                 variant="outline-twitch"
28                                         >
29                                                 <Icon.STREAM />
30                                                 {' '}
31                                                 {user.stream_link}
32                                         </Button>
33                                 :
34                                         i18n.t('users.noStream')
35                                 }
36                                 {' '}
37                                 <EditStreamLinkButton user={user} />
38                         </p>
39                 </Col>
40                 <Col md={6} className="mb-5">
41                         <h2>{i18n.t('users.tournamentRecords')}</h2>
42                         <Records
43                                 first={user.tournament_first_count}
44                                 second={user.tournament_second_count}
45                                 third={user.tournament_third_count}
46                         />
47                 </Col>
48                 <Col md={6} className="mb-5">
49                         <h2>{i18n.t('users.roundRecords')}</h2>
50                         <Records
51                                 first={user.round_first_count}
52                                 second={user.round_second_count}
53                                 third={user.round_third_count}
54                         />
55                 </Col>
56                 <Col md={12} className="mb-5">
57                         <h2>{i18n.t('users.tournaments')}</h2>
58                         <Participation user={user} />
59                 </Col>
60         </Row>
61 </Container>;
62
63 Profile.propTypes = {
64         user: PropTypes.shape({
65                 participation: PropTypes.arrayOf(PropTypes.shape({
66                 })),
67                 round_first_count: PropTypes.number,
68                 round_second_count: PropTypes.number,
69                 round_third_count: PropTypes.number,
70                 stream_link: PropTypes.string,
71                 tournament_first_count: PropTypes.number,
72                 tournament_second_count: PropTypes.number,
73                 tournament_third_count: PropTypes.number,
74                 username: PropTypes.string,
75         }),
76 };
77
78 export default withTranslation()(Profile);