import { defineComponent as f, ref as c, createElementBlock as s, openBlock as r, createElementVNode as l, Fragment as p, renderList as m, unref as n, createBlock as v, withDirectives as x, withKeys as k, vModelText as w } from "vue";
import { useUser as _, useAccount as b, addProfileField as d } from "./composables-BAZQlC3e.js";
import { UserProfileField as g } from "./components.js";
const F = { class: "flex flex-col" }, U = { class: "flex flex-col p-2" }, y = { class: "flex items-center flex-wrap" }, E = /* @__PURE__ */ f({
  __name: "UserProfile",
  setup(B) {
    const { user: i } = _(), { account: u } = b(i.pub), o = c("");
    return (P, e) => (r(), s("div", F, [
      l("div", U, [
        (r(!0), s(p, null, m(n(u).profile, (t, a) => (r(), v(n(g), {
          key: t,
          field: `${a}`,
          content: t
        }, null, 8, ["field", "content"]))), 128)),
        l("div", y, [
          x(l("input", {
            class: "p-2 rounded-lg shadow-md dark-bg-dark-400",
            "onUpdate:modelValue": e[0] || (e[0] = (t) => o.value = t),
            placeholder: "New profile field",
            onKeydown: e[1] || (e[1] = k((t) => n(d)(o.value), ["enter"]))
          }, null, 544), [
            [w, o.value]
          ]),
          l("button", {
            class: "m-2 button items-center dark-bg-dark-400",
            onClick: e[2] || (e[2] = (t) => n(d)(o.value))
          }, e[3] || (e[3] = [
            l("div", { class: "i-la-plus" }, null, -1),
            l("div", { class: "p-1 text-sm" }, "Add", -1)
          ]))
        ])
      ])
    ]));
  }
});
export {
  E as default
};
//# sourceMappingURL=UserProfile-DunRxR3S.js.map
