resources/js/components/common/Header.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Container, Nav, Navbar } from 'react-bootstrap';
   4 import { LinkContainer } from 'react-router-bootstrap';
   5 import { withTranslation } from 'react-i18next';
   6
   7 import Icon from './Icon';
   8 import LanguageSwitcher from './LanguageSwitcher';
   9 import { getAvatarUrl } from '../../helpers/User';
  10 import { withUser } from '../../helpers/UserContext';
  11 import i18n from '../../i18n';
  12
  13 const Header = ({ doLogout, user }) =>
  14         <Navbar id="header" bg="dark" variant="dark">
  15                 <Container fluid>
  16                         <LinkContainer to="/">
  17                                 <Navbar.Brand>
  18                                         ALttP
  19                                 </Navbar.Brand>
  20                         </LinkContainer>
  21                         <Nav>
  22                                 <LinkContainer to="/tournaments/1">
  23                                         <Nav.Link href="/tournaments/1">
  24                                                 Season 1
  25                                         </Nav.Link>
  26                                 </LinkContainer>
  27                                 <LinkContainer to="/tournaments/4">
  28                                         <Nav.Link href="/tournaments/4">
  29                                                 Season 2
  30                                         </Nav.Link>
  31                                 </LinkContainer>
  32                                 <LinkContainer to="/tournaments/5">
  33                                         <Nav.Link href="/tournaments/5">
  34                                                 Super Metroid
  35                                         </Nav.Link>
  36                                 </LinkContainer>
  37                         </Nav>
  38                         <Navbar.Text className="ms-auto me-2">
  39                                 <LanguageSwitcher />
  40                         </Navbar.Text>
  41                         <Nav>
  42                                 {user ?
  43                                         <>
  44                                                 <LinkContainer to={`/users/${user.id}`}>
  45                                                         <Nav.Link>
  46                                                                 <img alt="" src={getAvatarUrl(user)} />
  47                                                                 {user.username}
  48                                                                 <span className="text-muted">#{user.discriminator}</span>
  49                                                         </Nav.Link>
  50                                                 </LinkContainer>
  51                                                 <Button
  52                                                         onClick={doLogout}
  53                                                         title={i18n.t('button.logout')}
  54                                                         variant="outline-secondary"
  55                                                 >
  56                                                         <Icon.LOGOUT title="" />
  57                                                 </Button>
  58                                         </>
  59                                 :
  60                                         <Button href="/login" variant="discord">
  61                                                 <Icon.DISCORD />
  62                                                 {' '}
  63                                                 {i18n.t('button.login')}
  64                                         </Button>
  65                                 }
  66                         </Nav>
  67                 </Container>
  68         </Navbar>
  69 ;
  70
  71 Header.propTypes = {
  72         doLogout: PropTypes.func,
  73         user: PropTypes.shape({
  74                 avatar: PropTypes.string,
  75                 discriminator: PropTypes.string,
  76                 id: PropTypes.string,
  77                 username: PropTypes.string,
  78         }),
  79 };
  80
  81 export default withTranslation()(withUser(Header));