resources/js/components/users/Box.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5 import { useNavigate } from 'react-router-dom';
   6
   7 import { getAvatarUrl } from '../../helpers/User';
   8 import i18n from '../../i18n';
   9
  10 const Box = ({ discriminator, user }) => {
  11         const navigate = useNavigate();
  12
  13         if (!user) {
  14                 return <span>{i18n.t('general.anonymous')}</span>;
  15         }
  16
  17         return <Button
  18                 className="user-box"
  19                 onClick={() => navigate(`/users/${user.id}`)}
  20                 variant="link"
  21         >
  22                 <img alt="" src={getAvatarUrl(user)} />
  23                 <span>{discriminator || !user.nickname ? user.username : user.nickname}</span>
  24                 {discriminator ?
  25                         <span className="text-muted">
  26                                 {'#'}
  27                                 {user.discriminator}
  28                         </span>
  29                 : null}
  30         </Button>;
  31 };
  32
  33 Box.propTypes = {
  34         discriminator: PropTypes.bool,
  35         user: PropTypes.shape({
  36                 discriminator: PropTypes.string,
  37                 id: PropTypes.string,
  38                 nickname: PropTypes.string,
  39                 username: PropTypes.string,
  40         }),
  41 };
  42
  43 export default withTranslation()(Box);