You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.1 KiB
47 lines
1.1 KiB
import classNames from 'classnames'; |
|
|
|
import { useHovering } from '../../hooks/useHovering'; |
|
import type { Account } from '../../types/resources'; |
|
import { autoPlayGif } from '../initial_state'; |
|
|
|
interface Props { |
|
account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there |
|
size: number; |
|
style?: React.CSSProperties; |
|
inline?: boolean; |
|
animate?: boolean; |
|
} |
|
|
|
export const Avatar: React.FC<Props> = ({ |
|
account, |
|
animate = autoPlayGif, |
|
size = 20, |
|
inline = false, |
|
style: styleFromParent, |
|
}) => { |
|
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate); |
|
|
|
const style = { |
|
...styleFromParent, |
|
width: `${size}px`, |
|
height: `${size}px`, |
|
}; |
|
|
|
const src = |
|
hovering || animate |
|
? account?.get('avatar') |
|
: account?.get('avatar_static'); |
|
|
|
return ( |
|
<div |
|
className={classNames('account__avatar', { |
|
'account__avatar-inline': inline, |
|
})} |
|
onMouseEnter={handleMouseEnter} |
|
onMouseLeave={handleMouseLeave} |
|
style={style} |
|
> |
|
{src && <img src={src} alt={account?.get('acct')} />} |
|
</div> |
|
); |
|
};
|
|
|