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 EditStreamLinkButton from './EditStreamLinkButton';
   8 import Participation from './Participation';
   9 import Icon from '../common/Icon';
  10 import i18n from '../../i18n';
  11
  12 const Profile = ({ user }) => <Container>
  13         <h1>{user.username}</h1>
  14         <Row>
  15                 <Col md={6}>
  16                         <h2>{i18n.t('users.discordTag')}</h2>
  17                         <Box discriminator user={user} />
  18                 </Col>
  19                 <Col md={6}>
  20                         <h2>{i18n.t('users.streamLink')}</h2>
  21                         <p>
  22                                 {user.stream_link ?
  23                                         <Button
  24                                                 href={user.stream_link}
  25                                                 target="_blank"
  26                                                 variant="outline-twitch"
  27                                         >
  28                                                 <Icon.STREAM />
  29                                                 {' '}
  30                                                 {user.stream_link}
  31                                         </Button>
  32                                 :
  33                                         i18n.t('users.noStream')
  34                                 }
  35                                 {' '}
  36                                 <EditStreamLinkButton user={user} />
  37                         </p>
  38                 </Col>
  39                 <Col md={12}>
  40                         <h2>{i18n.t('users.tournaments')}</h2>
  41                         <Participation user={user} />
  42                 </Col>
  43         </Row>
  44 </Container>;
  45
  46 Profile.propTypes = {
  47         user: PropTypes.shape({
  48                 participation: PropTypes.arrayOf(PropTypes.shape({
  49                 })),
  50                 stream_link: PropTypes.string,
  51                 username: PropTypes.string,
  52         }),
  53 };
  54
  55 export default withTranslation()(Profile);