X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fusers%2FBox.js;h=d7ee3af9944ac3c736678f11d40ec0ad1c91cbb8;hb=2ab05ab7927e8b21887ffa42d04eb9d4ff899382;hp=139e6f65573081dda97849ead6a0681b5ae292b4;hpb=edd0e97bfdc544114f30bf4c13a929631c44a555;p=alttp.git

diff --git a/resources/js/components/users/Box.js b/resources/js/components/users/Box.js
index 139e6f6..d7ee3af 100644
--- a/resources/js/components/users/Box.js
+++ b/resources/js/components/users/Box.js
@@ -1,26 +1,40 @@
 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 = ({ 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>
-		<span className="text-muted">
-			{'#'}
-			{user.discriminator}
-		</span>
-	</span>
-:
-	<span>{i18n.t('general.anonymous')}</span>
-;
+		{discriminator ?
+			<span className="text-muted">
+				{'#'}
+				{user.discriminator}
+			</span>
+		: null}
+	</Button>;
+};
 
 Box.propTypes = {
+	discriminator: PropTypes.bool,
 	user: PropTypes.shape({
 		discriminator: PropTypes.string,
+		id: PropTypes.string,
 		username: PropTypes.string,
 	}),
 };