]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/Header.js
fix initial match time
[alttp.git] / 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 { useTranslation } 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
12 const Header = ({ doLogout, user }) => {
13         const { t } = useTranslation();
14
15         return <Navbar id="header" bg="dark" variant="dark">
16                 <Container fluid>
17                         <LinkContainer to="/">
18                                 <Navbar.Brand>
19                                         ALttP
20                                 </Navbar.Brand>
21                         </LinkContainer>
22                         <Nav>
23                                 <LinkContainer to="/tournaments/6">
24                                         <Nav.Link href="/tournaments/6">
25                                                 ALttPR Weekly
26                                         </Nav.Link>
27                                 </LinkContainer>
28                                 <LinkContainer to="/tournaments/5">
29                                         <Nav.Link href="/tournaments/5">
30                                                 Super Metroid
31                                         </Nav.Link>
32                                 </LinkContainer>
33                         </Nav>
34                         <Nav className="ms-auto">
35                                 <LinkContainer to="/tech">
36                                         <Nav.Link href="/tech">
37                                                 {t('menu.tech')}
38                                         </Nav.Link>
39                                 </LinkContainer>
40                                 <LinkContainer to="/map">
41                                         <Nav.Link href="/map">
42                                                 {t('menu.map')}
43                                         </Nav.Link>
44                                 </LinkContainer>
45                         </Nav>
46                         <Navbar.Text className="mx-2">
47                                 <LanguageSwitcher />
48                         </Navbar.Text>
49                         <Nav>
50                                 {user ?
51                                         <>
52                                                 <LinkContainer to={`/users/${user.id}`}>
53                                                         <Nav.Link>
54                                                                 <img alt="" src={getAvatarUrl(user)} />
55                                                                 {user.username}
56                                                                 <span className="text-muted">#{user.discriminator}</span>
57                                                         </Nav.Link>
58                                                 </LinkContainer>
59                                                 <Button
60                                                         onClick={doLogout}
61                                                         title={t('button.logout')}
62                                                         variant="outline-secondary"
63                                                 >
64                                                         <Icon.LOGOUT title="" />
65                                                 </Button>
66                                         </>
67                                 :
68                                         <Button
69                                                 href="/login"
70                                                 onClick={() => {
71                                                         if (location.pathname.length > 1) {
72                                                                 localStorage.setItem('returnPath', location.pathname.substr(1));
73                                                         }
74                                                 }}
75                                                 variant="discord"
76                                         >
77                                                 <Icon.DISCORD />
78                                                 {' '}
79                                                 {t('button.login')}
80                                         </Button>
81                                 }
82                         </Nav>
83                 </Container>
84         </Navbar>;
85 };
86
87 Header.propTypes = {
88         doLogout: PropTypes.func,
89         user: PropTypes.shape({
90                 avatar: PropTypes.string,
91                 discriminator: PropTypes.string,
92                 id: PropTypes.string,
93                 username: PropTypes.string,
94         }),
95 };
96
97 export default withUser(Header);