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.
40 lines
1.0 KiB
40 lines
1.0 KiB
import * as React from 'react'; |
|
import classNames from 'classnames'; |
|
import { autoPlayGif } from '../initial_state'; |
|
import { useHovering } from '../../hooks/useHovering'; |
|
import type { Account } from '../../types/resources'; |
|
|
|
type Props = { |
|
account: Account; |
|
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> |
|
); |
|
}; |
|
|
|
export default Avatar;
|
|
|