smov/src/components/Avatar.tsx

import classNames from "classnames";

import { Icon, Icons } from "@/components/Icon";
import { UserIcon } from "@/components/UserIcon";
import { AccountProfile } from "@/pages/parts/auth/AccountCreatePart";
import { useAuthStore } from "@/stores/auth";

export interface AvatarProps {
  profile: AccountProfile["profile"];
  sizeClass?: string;
  iconClass?: string;
}

export function Avatar(props: AvatarProps) {
  return (
    <div
      className={classNames(
        props.sizeClass,
        "rounded-full overflow-hidden flex items-center justify-center text-white"
      )}
      style={{
        background: `linear-gradient(to bottom right, ${props.profile.colorA}, ${props.profile.colorB})`,
      }}
    >
      <UserIcon className={props.iconClass} icon={props.profile.icon as any} />
    </div>
  );
}

export function UserAvatar(props: {
  sizeClass?: string;
  iconClass?: string;
  bottom?: React.ReactNode;
}) {
  const auth = useAuthStore();
  if (!auth.account) return null;
  return (
    <div className="relative inline-block">
      <Avatar
        profile={auth.account.profile}
        sizeClass={props.sizeClass ?? "w-[2rem] h-[2rem]"}
        iconClass={props.iconClass}
      />
      {props.bottom ? (
        <div className="absolute bottom-0 left-1/2 transform translate-y-1/2 -translate-x-1/2">
          {props.bottom}
        </div>
      ) : null}
    </div>
  );
}

export function NoUserAvatar(props: {
  sizeClass?: string;
  iconClass?: string;
}) {
  return (
    <div className="relative inline-block">
      <div
        className={classNames(
          props.sizeClass ?? "w-[2rem] h-[2rem]",
          "rounded-full overflow-hidden flex items-center justify-center text-type-dimmed hover:text-type-secondary bg-pill-background bg-opacity-50 hover:bg-opacity-100 transition-colors duration-100"
        )}
      >
        <Icon className={props.iconClass ?? "text-xl"} icon={Icons.MENU} />
      </div>
    </div>
  );
}