xtreme-ui/dist/components/base/Avatar/Avatar.js

Collection of reusable components that can be used in web projects

"use client";
import { jsx as i } from "react/jsx-runtime";
import { forwardRef as z, useState as c, useEffect as E } from "react";
import C from "clsx";
import { FACE_ICONS as m } from "../../../utils/constants/iconCollection.js";
import { readImageFile as F, readImageSrc as L } from "../../../utils/helper/imageHelper.js";
import { Icon as b } from "../Icon/Icon.js";
/* empty css            */
import { EAvatarSize as M } from "./types.js";
const R = z((h, g) => {
  const { className: u, src: a, file: o, alt: v, placeholderIcon: y, size: l = "default", onClick: I } = h, [n, f] = c(), [x, A] = c(m.happy[0]), [N, t] = c(!!a || !!o), [p, r] = c(!1), d = typeof l == "number" ? l : M[l], S = C(
    "xtrAvatar",
    u,
    N && "loading",
    p && "error"
  ), s = (e) => {
    e && setTimeout(() => f(e), 300), setTimeout(() => t(!1), 1e3);
  };
  return E(() => {
    A(m.happy[Math.floor(Math.random() * m.happy.length)]);
    try {
      o ? (t(!0), r(!1), F(o).then((e) => s(e)).catch((e) => {
        console.log(e), t(!1), r(!0);
      })) : a ? (t(!0), r(!1), L(a).then((e) => s(e)).catch((e) => {
        console.log(e, a), t(!1), r(!0);
      })) : (f(void 0), s());
    } catch {
      s();
    }
  }, [a, o]), /* @__PURE__ */ i(
    "div",
    {
      ref: g,
      className: S,
      style: { "--avatarSize": d + "px" },
      onClick: I,
      role: "img",
      children: n ? /* @__PURE__ */ i("img", { className: "image", src: n, alt: v }) : /* @__PURE__ */ i(
        b,
        {
          className: "placeholder",
          type: "solid",
          size: 8 + d / 4,
          code: p ? "e1b7" : y ?? x
        }
      )
    }
  );
});
R.displayName = "Avatar";
export {
  R as Avatar
};