Masto/app/javascript/flavours/glitch/components/avatar.tsx

import * as React from "react";

import classNames from "classnames";

import { useHovering } from "flavours/glitch/hooks/useHovering";
import { autoPlayGif } from "flavours/glitch/initial_state";
import  { type Account } from "flavours/glitch/types/resources";

interface Props {
  account: Account | undefined,
  className?: string,
  size: number,
  style?: React.CSSProperties,
  inline?: boolean,
}

export const Avatar: React.FC<Props> = ({
  account,
  className,
  size = 20,
  inline = false,
  style: styleFromParent,
}) => {
  const { hovering, handleMouseEnter, handleMouseLeave } =
    useHovering(autoPlayGif);

  const style = {
    ...styleFromParent,
    width: `${size}px`,
    height: `${size}px`,
    backgroundSize: "cover",
    backgroundPosition: "center",
  };

  if (account) {
    style.backgroundImage = `url(${account.get(
      hovering ? "avatar" : "avatar_static",
    )})`;
  }

  return (
    <div
      className={classNames(
        "account__avatar",
        { "account__avatar-inline": inline },
        className,
      )}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={style}
      data-avatar-of={account && `@${account.get("acct")}`}
      role='img'
      aria-label={account?.get("acct")}
    />
  );
};