@mankindui/core
Version:
- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)
36 lines (35 loc) • 1.31 kB
JavaScript
import { j as r } from "../../_virtual/jsx-runtime.js";
import { useState as i, useEffect as u } from "react";
import { cva as p } from "../../node_modules/class-variance-authority/dist/index.js";
const m = p(["align-middle rounded-full object-cover aspect-square overflow-hidden"], {
variants: {
size: {
S: ["w-[30px]", "h-[30px]"],
M: ["w-[45px]", "h-[45px]"],
L: ["w-[60px]", "h-[60px]"]
},
border: {
true: ["border-1", "border-gray-300"],
false: ["border-none"]
}
},
defaultVariants: {
size: "M",
border: !1
}
}), o = ({ className: t, size: l, imageUrl: e, border: d, children: n, ...c }) => {
const [a, s] = i(!1);
u(() => {
s(!1);
}, [e]);
const f = () => s(!0);
return /* @__PURE__ */ r.jsxs("div", { "data-component": o.displayName, className: m({ size: l, border: d, className: t }), ...c, children: [
a ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center w-full h-full bg-transparent border-2 border-gray-300 rounded-full" }) : /* @__PURE__ */ r.jsx("img", { src: e, alt: "avatar", className: "w-full h-full object-cover rounded-full", onError: f, style: { display: a ? "none" : "block" } }),
n
] });
};
o.displayName = "Avatar";
export {
o as Avatar
};
//# sourceMappingURL=index.js.map