2024-07-31 11:53:36 +00:00
|
|
|
import { Typography } from '@mui/material'
|
2024-04-19 09:07:18 +00:00
|
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import { State } from '../store/rootReducer'
|
2024-07-31 11:53:36 +00:00
|
|
|
|
|
|
|
import styles from './username.module.scss'
|
|
|
|
import { AvatarIconButton } from './UserAvatarIconButton'
|
2024-02-28 16:49:44 +00:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
username: string
|
|
|
|
avatarContent: string
|
|
|
|
handleClick: (event: React.MouseEvent<HTMLElement>) => void
|
|
|
|
}
|
|
|
|
|
2024-07-31 11:53:36 +00:00
|
|
|
/**
|
|
|
|
* This component will be used for the displaying logged in user in AppBar.
|
|
|
|
* Clicking will open the menu.
|
|
|
|
*/
|
2024-02-28 16:49:44 +00:00
|
|
|
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 (
|
2024-07-31 11:53:36 +00:00
|
|
|
<div className={styles.container}>
|
2024-02-28 16:49:44 +00:00
|
|
|
<Typography
|
2024-05-15 08:50:21 +00:00
|
|
|
variant="h6"
|
2024-02-28 16:49:44 +00:00
|
|
|
sx={{
|
2024-07-29 16:06:23 +00:00
|
|
|
fontWeight: 500,
|
|
|
|
fontSize: '14px',
|
|
|
|
color: 'var(--text-color)',
|
2024-02-28 16:49:44 +00:00
|
|
|
display: { xs: 'none', md: 'flex' }
|
|
|
|
}}
|
|
|
|
>
|
2024-07-29 16:25:32 +00:00
|
|
|
{username}
|
2024-02-28 16:49:44 +00:00
|
|
|
</Typography>
|
2024-07-31 11:53:36 +00:00
|
|
|
<AvatarIconButton
|
|
|
|
src={avatarContent}
|
|
|
|
hexKey={hexKey}
|
2024-07-29 16:06:23 +00:00
|
|
|
aria-label="account of current user"
|
|
|
|
aria-controls="menu-appbar"
|
|
|
|
aria-haspopup="true"
|
|
|
|
onClick={handleClick}
|
2024-07-31 11:53:36 +00:00
|
|
|
/>
|
2024-07-29 16:06:23 +00:00
|
|
|
</div>
|
2024-02-28 16:49:44 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Username
|