import { defineComponent as p, useColor as f, useGun as v, ref as i, watch as h, gunAvatar as c, openBlock as r, createElementBlock as n, normalizeStyle as d, unref as m, createBaseVNode as g } from "./composables-078fa750.js";
const z = { class: "flex flex-col items-center justify-center" }, y = ["width", "height", "src"], x = /* @__PURE__ */ g("div", { class: "i-la-user" }, null, -1), k = [
  x
], A = /* @__PURE__ */ p({
  __name: "AccountAvatar",
  props: {
    pub: { type: String, default: "" },
    size: { type: Number, default: 42 },
    border: { type: Number, default: 2 }
  },
  setup(e) {
    const t = e, b = f("deep"), a = v(), s = i();
    h(() => t.pub, (u) => {
      s.value = c({ pub: t.pub, size: t.size * 4 });
    }, { immediate: !0 }), a.user(t.pub).get("avatar").on((u) => {
      u ? a.get("#avatars").get(u).once((l) => {
        s.value = l;
      }) : s.value = c({ pub: t.pub, size: t.size * 4 });
    });
    const o = i();
    return a.user(t.pub).get("pulse").on(() => {
      o.value = !o.value;
    }), (u, l) => (r(), n("div", z, [
      e.pub ? (r(), n("img", {
        key: 0,
        class: "border rounded-full overflow-hidden transition duration-500 ease-out",
        style: d({ borderColor: o.value ? m(b).hex(e.pub) : "transparent", borderWidth: `${e.border}px` }),
        width: e.size,
        height: e.size,
        src: s.value
      }, null, 12, y)) : (r(), n("div", {
        key: 1,
        class: "pb-2 px-1",
        style: d({ fontSize: e.size + "px" })
      }, k, 4))
    ]));
  }
});
export {
  A as default
};
//# sourceMappingURL=AccountAvatar-fd4482ec.js.map
