46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { Typography } from '@mui/material'
|
|
import { useAppSelector } from '../hooks/store'
|
|
|
|
import styles from './username.module.scss'
|
|
import { AvatarIconButton } from './UserAvatarIconButton'
|
|
|
|
type Props = {
|
|
username: string
|
|
avatarContent: string
|
|
handleClick: (event: React.MouseEvent<HTMLElement>) => void
|
|
}
|
|
|
|
/**
|
|
* This component will be used for the displaying logged in user in AppBar.
|
|
* Clicking will open the menu.
|
|
*/
|
|
const Username = ({ username, avatarContent, handleClick }: Props) => {
|
|
const hexKey = useAppSelector((state) => state.auth.usersPubkey)
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
fontWeight: 500,
|
|
fontSize: '14px',
|
|
color: 'var(--text-color)',
|
|
display: { xs: 'none', md: 'flex' }
|
|
}}
|
|
>
|
|
{username}
|
|
</Typography>
|
|
<AvatarIconButton
|
|
src={avatarContent}
|
|
hexKey={hexKey}
|
|
aria-label="account of current user"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleClick}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Username
|