clickable user boxes

diff --git a/resources/js/components/users/Box.js b/resources/js/components/users/Box.js
index 7bbc186eaacc54e4e934b8fdef82d2b71aa9b24d..d7ee3af9944ac3c736678f11d40ec0ad1c91cbb8 100644 (file)
--- a/resources/js/components/users/Box.js
+++ b/resources/js/components/users/Box.js
@@ -1,12 +1,24 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Button } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { getAvatarUrl } from '../../helpers/User';
 import i18n from '../../i18n';
 
-const Box = ({ discriminator, user }) => user ?
-       <span className="user-box">
+const Box = ({ discriminator, user }) => {
+       const navigate = useNavigate();
+
+       if (!user) {
+               return <span>{i18n.t('general.anonymous')}</span>;
+       }
+
+       return <Button
+               className="user-box"
+               onClick={() => navigate(`/users/${user.id}`)}
+               variant="link"
+       >
                <img alt="" src={getAvatarUrl(user)} />
                <span>{user.username}</span>
                {discriminator ?
@@ -15,15 +27,14 @@ const Box = ({ discriminator, user }) => user ?
                                {user.discriminator}
                        </span>
                : null}
-       </span>
-:
-       <span>{i18n.t('general.anonymous')}</span>
-;
+       </Button>;
+};
 
 Box.propTypes = {
        discriminator: PropTypes.bool,
        user: PropTypes.shape({
                discriminator: PropTypes.string,
+               id: PropTypes.string,
                username: PropTypes.string,
        }),
 };

diff --git a/resources/sass/users.scss b/resources/sass/users.scss
index 94aab1e9e76c28c158ac25cc684ea973f5caac99..c6f7509e47cb9ea63b29dfff8006a8a518960222 100644 (file)
--- a/resources/sass/users.scss
+++ b/resources/sass/users.scss
@@ -1,4 +1,8 @@
 .user-box {
+       padding: 0;
+       color: inherit;
+       text-decoration: none;
+
        img {
                max-height: 2rem;
                width: auto;