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 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> ); };