@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
160 lines (159 loc) • 4.5 kB
JavaScript
'use client';
import { jsx as t, jsxs as J } from "react/jsx-runtime";
import K from "react";
import { Badge as f, Avatar as P } from "@heroui/react";
import { useAuth as Q } from "../../../hooks/use-auth.js";
import { useConfig as V } from "../../../hooks/use-config.js";
import { useTheme as W } from "../../../hooks/use-theme.js";
function X(e, s) {
if (e) {
const r = e.trim().split(" ");
return r.length >= 2 ? `${r[0][0]}${r[1][0]}`.toUpperCase() : r[0][0]?.toUpperCase() || "";
}
return s && s[0]?.toUpperCase() || "";
}
function j(e) {
switch (e?.toLowerCase()) {
case "owner":
return "danger";
case "admin":
return "warning";
case "member":
return "primary";
case "guest":
return "secondary";
default:
return "default";
}
}
function L(e) {
switch (e?.toLowerCase()) {
case "owner":
return "Owner";
case "admin":
return "Admin";
case "member":
return "Member";
case "guest":
return "Guest";
default:
return e || "";
}
}
function re({
userId: e,
src: s,
name: r,
email: d,
size: h = "md",
radius: g = "full",
showStatus: b = !1,
isOnline: c = !1,
fallback: v,
className: w = "",
onClick: i,
isClickable: l = !1,
showOrganizationBadge: x = !1,
role: o,
color: N = "default",
isBordered: y = !1,
isDisabled: n = !1,
initials: C,
icon: U,
quality: M = 80,
useOrganizationColors: A = !1
}) {
const { user: R, isOrganizationMember: B } = Q(), { components: E, organizationSettings: G } = V(), { primaryColor: Y } = W(), z = E.UserAvatar;
if (z)
return /* @__PURE__ */ t(z, { userId: e, src: s, name: r, email: d, size: h, radius: g, showStatus: b, isOnline: c, fallback: v, className: w, onClick: i, isClickable: l, showOrganizationBadge: x, role: o, color: N, isBordered: y, isDisabled: n, initials: C, icon: U, quality: M, useOrganizationColors: A });
const a = e ? null : R, S = s || a?.profileImageUrl, I = r || a?.firstName && a?.lastName ? `${a.firstName} ${a.lastName}` : a?.username, T = d || a?.primaryEmailAddress, $ = C || X(I, T), q = A && G?.branding?.primaryColor ? "primary" : N, F = v || ($ ? /* @__PURE__ */ t("span", { className: "font-medium text-inherit", children: $ }) : U || /* @__PURE__ */ t(
"svg",
{
className: "w-full h-full text-default-400",
fill: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ t("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
}
)), H = K.useCallback(() => {
l && i && !n && i();
}, [l, i, n]), u = b && /* @__PURE__ */ t(
f,
{
content: "",
color: c ? "success" : "default",
shape: "circle",
placement: "bottom-right",
size: "sm",
classNames: {
badge: c ? "border-2 border-white" : "border-2 border-white bg-default-300"
}
}
), p = x && o && B && /* @__PURE__ */ t(
f,
{
content: L(o),
color: j(o),
variant: "flat",
placement: "bottom-right",
size: "sm",
classNames: {
badge: "text-xs px-1 py-0.5 min-w-fit"
}
}
), m = /* @__PURE__ */ t(
P,
{
src: S,
name: I,
size: h,
radius: g,
color: q,
isBordered: y,
isDisabled: n,
fallback: F,
classNames: {
base: [
w,
l && !n && "cursor-pointer hover:opacity-80 transition-opacity",
n && "opacity-50 cursor-not-allowed"
].filter(Boolean).join(" ")
},
onClick: H
}
);
return u && p ? /* @__PURE__ */ J("div", { className: "relative inline-block", children: [
m,
u,
/* @__PURE__ */ t("div", { className: "absolute -bottom-1 -right-1 transform translate-x-1/2", children: p })
] }) : u ? /* @__PURE__ */ t(
f,
{
content: "",
color: c ? "success" : "default",
shape: "circle",
placement: "bottom-right",
size: "sm",
classNames: {
badge: c ? "border-2 border-white" : "border-2 border-white bg-default-300"
},
children: m
}
) : p ? /* @__PURE__ */ t(
f,
{
content: L(o),
color: j(o),
variant: "flat",
placement: "bottom-right",
size: "sm",
classNames: {
badge: "text-xs px-1 py-0.5 min-w-fit"
},
children: m
}
) : m;
}
export {
re as UserAvatar
};
//# sourceMappingURL=user-avatar.js.map