94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import { Typography, IconButton, Box, useTheme } from '@mui/material'
|
|
import { useSelector } from 'react-redux'
|
|
import { State } from '../store/rootReducer'
|
|
import { hexToNpub } from '../utils'
|
|
import { Link } from 'react-router-dom'
|
|
import { getProfileRoute } from '../routes'
|
|
|
|
type Props = {
|
|
username: string
|
|
avatarContent: string
|
|
handleClick: (event: React.MouseEvent<HTMLElement>) => void
|
|
}
|
|
|
|
const Username = ({ username, avatarContent, handleClick }: Props) => {
|
|
const hexKey = useSelector((state: State) => state.auth.usersPubkey)
|
|
|
|
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"
|
|
style={{
|
|
borderWidth: '3px',
|
|
borderStyle: hexKey ? 'solid' : 'none',
|
|
borderColor: `#${hexKey?.substring(0, 6)}`
|
|
}}
|
|
/>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
color: '#3e3e3e',
|
|
padding: '0 8px',
|
|
display: { xs: 'none', md: 'flex' }
|
|
}}
|
|
>
|
|
{username}
|
|
</Typography>
|
|
</IconButton>
|
|
)
|
|
}
|
|
|
|
export default Username
|
|
|
|
type UserProps = {
|
|
pubkey: string
|
|
name: string
|
|
image?: string
|
|
}
|
|
|
|
/**
|
|
* This component will be used for the displaying username and profile picture.
|
|
* If image is not available, robohash image will be displayed
|
|
*/
|
|
export const UserComponent = ({ pubkey, name, image }: UserProps) => {
|
|
const theme = useTheme()
|
|
|
|
const npub = hexToNpub(pubkey)
|
|
const roboImage = `https://robohash.org/${npub}.png?set=set3`
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
|
<img
|
|
src={image || roboImage}
|
|
alt="User Image"
|
|
className="profile-image"
|
|
style={{
|
|
borderWidth: '3px',
|
|
borderStyle: 'solid',
|
|
borderColor: `#${pubkey.substring(0, 6)}`
|
|
}}
|
|
/>
|
|
<Link to={getProfileRoute(pubkey)}>
|
|
<Typography
|
|
component="label"
|
|
sx={{
|
|
textAlign: 'center',
|
|
cursor: 'pointer',
|
|
color: theme.palette.text.primary
|
|
}}
|
|
>
|
|
{name}
|
|
</Typography>
|
|
</Link>
|
|
</Box>
|
|
)
|
|
}
|