resources/js/components/aos/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 BaseRomButton from './BaseRomButton';
   8 import Icon from '../common/Icon';
   9 import LanguageSwitcher from '../common/LanguageSwitcher';
  10 import { getAvatarUrl } from '../../helpers/User';
  11 import { withUser } from '../../helpers/UserContext';
  12 import i18n from '../../i18n';
  13
  14 const Header = ({ doLogout, user }) =>
  15         <Navbar id="header" bg="dark" variant="dark">
  16                 <Container fluid>
  17                         <LinkContainer to="/">
  18                                 <Navbar.Brand>
  19                                         AoS
  20                                 </Navbar.Brand>
  21                         </LinkContainer>
  22                         <Navbar.Text className="ms-auto me-2 button-bar">
  23                                 <BaseRomButton />
  24                                 <LanguageSwitcher />
  25                         </Navbar.Text>
  26                         <Nav>
  27                                 {user ?
  28                                         <>
  29                                                 <LinkContainer to={`/users/${user.id}`}>
  30                                                         <Nav.Link>
  31                                                                 <img alt="" src={getAvatarUrl(user)} />
  32                                                                 {user.username}
  33                                                                 <span className="text-muted">#{user.discriminator}</span>
  34                                                         </Nav.Link>
  35                                                 </LinkContainer>
  36                                                 <Button
  37                                                         onClick={doLogout}
  38                                                         title={i18n.t('button.logout')}
  39                                                         variant="outline-secondary"
  40                                                 >
  41                                                         <Icon.LOGOUT title="" />
  42                                                 </Button>
  43                                         </>
  44                                 : null}
  45                         </Nav>
  46                 </Container>
  47         </Navbar>
  48 ;
  49
  50 Header.propTypes = {
  51         doLogout: PropTypes.func,
  52         user: PropTypes.shape({
  53                 avatar: PropTypes.string,
  54                 discriminator: PropTypes.string,
  55                 id: PropTypes.string,
  56                 username: PropTypes.string,
  57         }),
  58 };
  59
  60 export default withTranslation()(withUser(Header));