@trail-ui/react
Version:
166 lines (164 loc) • 6.45 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/avatar-component/avatar-component.tsx
var avatar_component_exports = {};
__export(avatar_component_exports, {
AvatarComponent: () => AvatarComponent
});
module.exports = __toCommonJS(avatar_component_exports);
var import_react_aria_components = require("react-aria-components");
var import_jsx_runtime = require("react/jsx-runtime");
var AvatarComponent = ({
name,
size = "md",
src,
color,
fontWeight,
zIndex,
withTooltip = false,
className
}) => {
const handleZIndex = (value) => {
switch (value) {
case "high":
return "z-50";
case "medium":
return "z-20";
case "low":
return "z-1";
default:
return "z-20";
}
};
const handleSize = (size2) => {
switch (size2) {
case "sm":
return "h-7 w-7 text-[10px]";
case "md":
return "h-9 w-9 text-[12px]";
case "lg":
return "h-11 w-11 text-[14px]";
}
};
const capitalizeText = (text) => {
return text == null ? void 0 : text.split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
};
const handleFontWeight = (weight) => {
switch (weight) {
case "bold":
return "font-medium";
case "semibold":
return "font-semibold";
default:
return "font-semibold";
}
};
const handleColor = (color2) => {
switch (color2) {
case "blue":
return "bg-blue-100 text-blue-900";
case "green":
return "bg-green-100 text-green-900";
case "purple":
return "bg-purple-100 text-purple-900";
case "red":
return "bg-red-100 text-red-900";
case "yellow":
return "bg-yellow-50 text-yellow-950";
default:
return "bg-neutral-200 text-neutral-950";
}
};
const getInitials = (name2) => {
var _a, _b, _c, _d, _e, _f;
const parts = (_a = name2 == null ? void 0 : name2.trim()) == null ? void 0 : _a.split(" ");
if ((parts == null ? void 0 : parts.length) === 1) {
return (_c = (_b = parts[0]) == null ? void 0 : _b.slice(0, 2)) == null ? void 0 : _c.toUpperCase();
}
return (_f = ((_d = parts == null ? void 0 : parts[0]) == null ? void 0 : _d[0]) + ((_e = parts == null ? void 0 : parts[1]) == null ? void 0 : _e[0])) == null ? void 0 : _f.toUpperCase();
};
const getAvatarColor = (value) => {
const firstChar = value == null ? void 0 : value.toLowerCase()[0];
switch (true) {
case ("a" <= firstChar && firstChar <= "d"):
return "green";
case ("e" <= firstChar && firstChar <= "h"):
return "purple";
case ("i" <= firstChar && firstChar <= "l"):
return "red";
case ("m" <= firstChar && firstChar <= "p"):
return "yellow";
case ("q" <= firstChar && firstChar <= "t"):
return "blue";
default:
return "default";
}
};
const avatarImg = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: `${className} ${handleSize(size)} ${handleColor(color != null ? color : "default")} ${handleZIndex(zIndex != null ? zIndex : "medium")} relative box-border flex select-none items-center justify-center overflow-hidden rounded-full border-[2px] border-neutral-50 bg-neutral-200 align-middle text-neutral-950 outline-purple-600 data-[focus-visible=true]:-outline-offset-2`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"img",
{
"aria-hidden": "true",
className: "flex h-full w-full object-cover transition-opacity !duration-500",
src,
alt: name
}
)
}
);
const avatarSpan = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: `${className} ${handleSize(size)} ${handleColor(color != null ? color : getAvatarColor(name))} ${handleZIndex(zIndex != null ? zIndex : "medium")} relative box-border flex select-none items-center justify-center overflow-hidden rounded-full border-[2px] border-neutral-50 align-middle outline-purple-600 data-[focus-visible=true]:-outline-offset-2`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
"aria-hidden": "true",
className: `${handleFontWeight(fontWeight != null ? fontWeight : "semibold")} text-inherit", absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 break-keep text-center`,
children: getInitials(name)
}
)
}
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.TooltipTrigger, { delay: 200, closeDelay: 200, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.Button,
{
id: "avatar",
className: "focus-visible:rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-purple-600",
children: src ? avatarImg : avatarSpan
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.Tooltip,
{
className: "shadow-medium pointer-events-none my-1 rounded-md bg-neutral-900 text-neutral-50 transition-all",
placement: "bottom",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "px-2 py-1 text-[10px]", children: capitalizeText(name) })
}
)
] }) }) : src ? avatarImg : avatarSpan });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AvatarComponent
});