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.
55 lines
1.6 KiB
55 lines
1.6 KiB
import type { Account } from 'mastodon/models/account'; |
|
|
|
import { useHovering } from '../../hooks/useHovering'; |
|
import { autoPlayGif } from '../initial_state'; |
|
|
|
interface Props { |
|
account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there |
|
friend: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there |
|
size?: number; |
|
baseSize?: number; |
|
overlaySize?: number; |
|
} |
|
|
|
export const AvatarOverlay: React.FC<Props> = ({ |
|
account, |
|
friend, |
|
size = 46, |
|
baseSize = 36, |
|
overlaySize = 24, |
|
}) => { |
|
const { hovering, handleMouseEnter, handleMouseLeave } = |
|
useHovering(autoPlayGif); |
|
const accountSrc = hovering |
|
? account?.get('avatar') |
|
: account?.get('avatar_static'); |
|
const friendSrc = hovering |
|
? friend?.get('avatar') |
|
: friend?.get('avatar_static'); |
|
|
|
return ( |
|
<div |
|
className='account__avatar-overlay' |
|
style={{ width: size, height: size }} |
|
onMouseEnter={handleMouseEnter} |
|
onMouseLeave={handleMouseLeave} |
|
> |
|
<div className='account__avatar-overlay-base'> |
|
<div |
|
className='account__avatar' |
|
style={{ width: `${baseSize}px`, height: `${baseSize}px` }} |
|
> |
|
{accountSrc && <img src={accountSrc} alt={account?.get('acct')} />} |
|
</div> |
|
</div> |
|
<div className='account__avatar-overlay-overlay'> |
|
<div |
|
className='account__avatar' |
|
style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }} |
|
> |
|
{friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />} |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
};
|
|
|