2024-06-28 09:24:14 +00:00
|
|
|
import { Box, IconButton, Typography, useTheme } from '@mui/material'
|
2024-04-19 09:07:18 +00:00
|
|
|
import { useSelector } from 'react-redux'
|
2024-06-28 09:24:14 +00:00
|
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
import { getProfileRoute } from '../routes'
|
2024-04-19 09:07:18 +00:00
|
|
|
import { State } from '../store/rootReducer'
|
2024-05-16 11:22:05 +00:00
|
|
|
import { hexToNpub } from '../utils'
|
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 (
|
2024-07-29 16:06:23 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'end',
|
|
|
|
alignItems: 'center',
|
|
|
|
gap: '12px'
|
|
|
|
}}
|
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-29 16:06:23 +00:00
|
|
|
<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)}`
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</IconButton>
|
|
|
|
</div>
|
2024-02-28 16:49:44 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Username
|
2024-05-16 11:22:05 +00:00
|
|
|
|
|
|
|
type UserProps = {
|
|
|
|
pubkey: string
|
|
|
|
name: string
|
|
|
|
image?: string
|
|
|
|
}
|
|
|
|
|
2024-05-17 08:59:03 +00:00
|
|
|
/**
|
|
|
|
* This component will be used for the displaying username and profile picture.
|
|
|
|
* If image is not available, robohash image will be displayed
|
|
|
|
*/
|
2024-05-16 11:22:05 +00:00
|
|
|
export const UserComponent = ({ pubkey, name, image }: UserProps) => {
|
|
|
|
const theme = useTheme()
|
2024-06-28 09:24:14 +00:00
|
|
|
const navigate = useNavigate()
|
2024-05-16 11:22:05 +00:00
|
|
|
|
|
|
|
const npub = hexToNpub(pubkey)
|
|
|
|
const roboImage = `https://robohash.org/${npub}.png?set=set3`
|
|
|
|
|
2024-07-05 09:04:20 +00:00
|
|
|
const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
|
|
e.stopPropagation()
|
2024-07-08 20:16:47 +00:00
|
|
|
// navigate to user's profile
|
2024-07-05 09:04:20 +00:00
|
|
|
navigate(getProfileRoute(pubkey))
|
|
|
|
}
|
|
|
|
|
2024-05-16 11:22:05 +00:00
|
|
|
return (
|
2024-05-22 06:19:40 +00:00
|
|
|
<Box
|
|
|
|
sx={{ display: 'flex', alignItems: 'center', gap: '10px', flexGrow: 1 }}
|
|
|
|
>
|
2024-05-16 11:22:05 +00:00
|
|
|
<img
|
|
|
|
src={image || roboImage}
|
|
|
|
alt="User Image"
|
|
|
|
className="profile-image"
|
|
|
|
style={{
|
|
|
|
borderWidth: '3px',
|
|
|
|
borderStyle: 'solid',
|
|
|
|
borderColor: `#${pubkey.substring(0, 6)}`
|
|
|
|
}}
|
2024-07-05 09:04:20 +00:00
|
|
|
onClick={handleClick}
|
2024-05-16 11:22:05 +00:00
|
|
|
/>
|
2024-06-28 09:24:14 +00:00
|
|
|
<Typography
|
|
|
|
component="label"
|
|
|
|
sx={{
|
|
|
|
textAlign: 'center',
|
|
|
|
cursor: 'pointer',
|
|
|
|
color: theme.palette.text.primary
|
|
|
|
}}
|
2024-07-05 09:04:20 +00:00
|
|
|
onClick={handleClick}
|
2024-06-28 09:24:14 +00:00
|
|
|
>
|
|
|
|
{name}
|
|
|
|
</Typography>
|
2024-05-16 11:22:05 +00:00
|
|
|
</Box>
|
|
|
|
)
|
|
|
|
}
|