34 lines
778 B
TypeScript
34 lines
778 B
TypeScript
|
import { Typography, IconButton } from '@mui/material'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
username: string
|
||
|
|
avatarContent: string
|
||
|
|
handleClick: (event: React.MouseEvent<HTMLElement>) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const Username = ({ username, avatarContent, handleClick }: Props) => {
|
||
|
|
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" />
|
||
|
|
<Typography
|
||
|
|
variant="h6"
|
||
|
|
sx={{
|
||
|
|
color: '#3e3e3e',
|
||
|
|
padding: '0 8px',
|
||
|
|
display: { xs: 'none', md: 'flex' }
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{username}
|
||
|
|
</Typography>
|
||
|
|
</IconButton>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Username
|