sigit.io/src/components/username.tsx

import { Typography, IconButton } from '@mui/material'
import { useSelector } from 'react-redux'
import { State } from '../store/rootReducer'

type Props = {
  username: string
  avatarContent: string
  handleClick: (event: React.MouseEvent<HTMLElement>) => void
}

const Username = ({ username, avatarContent, handleClick }: Props) => {
  const hexKey = useSelector((state: State) => state.auth.usersPubkey)

  return (
    <IconButton
      aria-label='account of current user'
      aria-controls='menu-appbar'
      aria-haspopup='true'
      onClick={handleClick}
      color='inherit'
    >
      <img
        src={avatarContent}
        alt='user-avatar'
        className='profile-image'
        style={{
          borderWidth: '3px',
          borderStyle: hexKey ? 'solid' : 'none',
          borderColor: `#${hexKey?.substring(0, 6)}`
        }}
      />
      <Typography
        variant='h6'
        sx={{
          color: '#3e3e3e',
          padding: '0 8px',
          display: { xs: 'none', md: 'flex' }
        }}
      >
        {username}
      </Typography>
    </IconButton>
  )
}

export default Username