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