2024-02-28 16:49:44 +00:00
|
|
|
import { Typography, IconButton } from '@mui/material'
|
2024-04-19 09:07:18 +00:00
|
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import { State } from '../store/rootReducer'
|
2024-02-28 16:49:44 +00:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
username: string
|
|
|
|
avatarContent: string
|
|
|
|
handleClick: (event: React.MouseEvent<HTMLElement>) => void
|
|
|
|
}
|
|
|
|
|
|
|
|
const Username = ({ username, avatarContent, handleClick }: Props) => {
|
2024-04-19 09:07:18 +00:00
|
|
|
const hexKey = useSelector((state: State) => state.auth.usersPubkey)
|
|
|
|
|
2024-02-28 16:49:44 +00:00
|
|
|
return (
|
|
|
|
<IconButton
|
2024-04-19 09:07:18 +00:00
|
|
|
aria-label='account of current user'
|
|
|
|
aria-controls='menu-appbar'
|
|
|
|
aria-haspopup='true'
|
2024-02-28 16:49:44 +00:00
|
|
|
onClick={handleClick}
|
2024-04-19 09:07:18 +00:00
|
|
|
color='inherit'
|
2024-02-28 16:49:44 +00:00
|
|
|
>
|
2024-04-19 09:07:18 +00:00
|
|
|
<img
|
|
|
|
src={avatarContent}
|
|
|
|
alt='user-avatar'
|
|
|
|
className='profile-image'
|
|
|
|
style={{
|
|
|
|
borderWidth: '3px',
|
|
|
|
borderStyle: hexKey ? 'solid' : 'none',
|
|
|
|
borderColor: `#${hexKey?.substring(0, 6)}`
|
|
|
|
}}
|
|
|
|
/>
|
2024-02-28 16:49:44 +00:00
|
|
|
<Typography
|
2024-04-19 09:07:18 +00:00
|
|
|
variant='h6'
|
2024-02-28 16:49:44 +00:00
|
|
|
sx={{
|
|
|
|
color: '#3e3e3e',
|
|
|
|
padding: '0 8px',
|
|
|
|
display: { xs: 'none', md: 'flex' }
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{username}
|
|
|
|
</Typography>
|
|
|
|
</IconButton>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Username
|