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