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';
7 import Icon from './Icon';
8 import { withUser } from '../../helpers/UserContext';
9 import i18n from '../../i18n';
11 const getAvatarUrl = user => `//cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`;
13 const Header = ({ doLogout, user }) =>
14 <Navbar id="header" bg="dark" variant="dark">
16 <LinkContainer to="/">
21 <Nav className="ms-auto">
24 <LinkContainer to={`/users/${user.id}`}>
26 <img alt="" src={getAvatarUrl(user)} />
28 <span className="text-muted">#{user.discriminator}</span>
33 title={i18n.t('button.logout')}
34 variant="outline-secondary"
36 <Icon.LOGOUT title="" />
40 <Button href="/login" variant="discord">
43 {i18n.t('button.login')}
52 doLogout: PropTypes.func,
53 user: PropTypes.shape({
54 avatar: PropTypes.string,
55 discriminator: PropTypes.string,
57 username: PropTypes.string,
61 export default withTranslation()(withUser(Header));