mobile header styles

[alttp.git] / resources / js / components / app / User.js

diff --git a/resources/js/components/app/User.js b/resources/js/components/app/User.js
new file mode 100644 (file)
index 0000000..6f58926
--- /dev/null
+++ b/resources/js/components/app/User.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Nav } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import { useUser } from '../../helpers/UserContext';
+import { getAvatarUrl } from '../../helpers/User';
+
+const User = ({ doLogout }) => {
+       const { t } = useTranslation();
+       const user = useUser();
+
+       return user
+               ? <>
+                       <Nav className="ms-auto">
+                               <LinkContainer to={`/users/${user.id}`}>
+                                       <Nav.Link>
+                                               <img alt="" src={getAvatarUrl(user)} />
+                                               {user.username}
+                                               {user.discriminator && user.discriminator !== '0' ?
+                                                       <span className="text-muted">#{user.discriminator}</span>
+                                               : null}
+                                       </Nav.Link>
+                               </LinkContainer>
+                       </Nav>
+                       <Button
+                       className="ms-2"
+                               onClick={doLogout}
+                               title={t('button.logout')}
+                               variant="outline-secondary"
+                       >
+                               <Icon.LOGOUT title="" />
+                       </Button>
+               </>
+               : <Button
+                       className="ms-auto"
+                       href="/login"
+                       onClick={() => {
+                               if (location.pathname.length > 1) {
+                                       localStorage.setItem('returnPath', location.pathname.substr(1));
+                               }
+                       }}
+                       title={t('button.login')}
+                       variant="discord"
+               >
+                       <Icon.DISCORD />
+                       {' '}
+                       {t('button.login')}
+               </Button>;
+};
+
+User.propTypes = {
+       doLogout: PropTypes.func,
+};
+
+export default User;