33 lines
993 B
TypeScript
33 lines
993 B
TypeScript
|
import { IconButton, IconButtonProps } from '@mui/material'
|
||
|
|
import styles from './style.module.scss'
|
||
|
|
import { getRoboHashPicture } from '../../utils'
|
||
|
|
|
||
|
|
interface AvatarIconButtonProps extends IconButtonProps {
|
||
|
|
src: string | undefined
|
||
|
|
hexKey: string | undefined
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This component displays profile image inside IconButton
|
||
|
|
* @param {string | undefined} props.src - image source or robohash picture
|
||
|
|
* @param {string | undefined} props.hexKey - robohash and affects border
|
||
|
|
* @param {IconButtonProps} props - component extends mui's IconButton
|
||
|
|
*/
|
||
|
|
export const AvatarIconButton = (props: AvatarIconButtonProps) => {
|
||
|
|
const { src, hexKey, ...rest } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<IconButton {...rest}>
|
||
|
|
<img
|
||
|
|
src={src || getRoboHashPicture(hexKey)}
|
||
|
|
alt="user image"
|
||
|
|
className={`${styles.icon}`}
|
||
|
|
style={{
|
||
|
|
borderStyle: hexKey ? 'solid' : 'none',
|
||
|
|
borderColor: `#${hexKey?.substring(0, 6)}`
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</IconButton>
|
||
|
|
)
|
||
|
|
}
|