@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
137 lines (136 loc) • 4.74 kB
JavaScript
'use client';
import { jsx as e, jsxs as t } from "react/jsx-runtime";
import { Button as $ } from "@heroui/react";
import { useAuth as F } from "../../../hooks/use-auth.js";
import { useConfig as w } from "../../../hooks/use-config.js";
import { UserAvatar as P } from "./user-avatar.js";
import { UserProfile as z } from "./user-profile.js";
function re({
appearance: r = "default",
avatarProps: v = {},
dropdownProps: h = {},
className: g = "",
showName: s = !1,
showOrganization: l = !1,
showStatus: N = !1,
showNotifications: B = !1,
notificationCount: a = 0,
size: n = "md",
radius: b = "lg",
isDisabled: d = !1,
isFullWidth: j = !1,
customMenuItems: L = [],
hideMenuItems: U = [],
onSignOut: y,
onProfileClick: k,
onSettingsClick: A,
onOrganizationClick: I,
onNotificationClick: H,
children: u,
isLoading: M = !1,
showDropdownIndicator: R = !1,
variant: W = "light",
color: q = "default",
startContent: m,
endContent: i,
showOrganizationBadge: D = !1,
role: E
}) {
const {
user: J,
isSignedIn: K,
isLoading: Q,
userName: c,
activeOrganization: f,
isOrganizationMember: S
} = F(), { components: T } = w(), G = T.UserButton;
if (G)
return /* @__PURE__ */ e(G, { appearance: r, avatarProps: v, dropdownProps: h, className: g, showName: s, showOrganization: l, showStatus: N, showNotifications: B, notificationCount: a, size: n, radius: b, isDisabled: d, isFullWidth: j, customMenuItems: L, hideMenuItems: U, onSignOut: y, onProfileClick: k, onSettingsClick: A, onOrganizationClick: I, onNotificationClick: H, children: u, isLoading: M, showDropdownIndicator: R, variant: W, color: q, startContent: m, endContent: i, showOrganizationBadge: D, role: E });
if (!K || !J)
return null;
const x = M || Q, V = {
sm: "sm",
md: "md",
lg: "lg"
}, X = E || (S ? "member" : void 0), o = R && /* @__PURE__ */ e("svg", { className: "w-4 h-4 text-default-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }), Y = B && a > 0 && /* @__PURE__ */ e("div", { className: "absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full min-w-[1.25rem] h-5 flex items-center justify-center", children: a > 99 ? "99+" : a }), Z = () => {
if (u)
return u;
const p = /* @__PURE__ */ t("div", { className: "relative", children: [
/* @__PURE__ */ e(
P,
{
size: V[n],
showStatus: N,
showOrganizationBadge: D,
role: X,
isClickable: !1,
...v
}
),
Y
] });
switch (r) {
case "minimal":
return /* @__PURE__ */ t("div", { className: "flex items-center gap-0", children: [
m,
p,
i || o
] });
case "compact":
return /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
m,
p,
(s || l) && /* @__PURE__ */ t("div", { className: "flex flex-col items-start min-w-0", children: [
s && c && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-default-700 truncate max-w-[120px]", children: c }),
l && f && /* @__PURE__ */ e("span", { className: "text-xs text-default-500 truncate max-w-[120px]", children: f.name })
] }),
i || o
] });
default:
return /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
m,
p,
(s || l) && /* @__PURE__ */ t("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
s && c && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-default-700 truncate", children: c }),
l && f && /* @__PURE__ */ e("span", { className: "text-xs text-default-500 truncate", children: f.name })
] }),
i || o
] });
}
}, _ = /* @__PURE__ */ e(
$,
{
size: n,
radius: b,
variant: W,
color: q,
isDisabled: d || x,
isLoading: x,
fullWidth: j,
className: [
"justify-start h-auto",
r === "minimal" ? "min-w-unit-10 p-1" : r === "compact" ? "px-2 py-1.5" : "px-3 py-2",
g
].filter(Boolean).join(" "),
children: Z()
}
);
return /* @__PURE__ */ e(
z,
{
customItems: L,
hideDefaultItems: U,
onSignOut: y,
onProfileClick: k,
onSettingsClick: A,
onOrganizationSwitch: I,
isDisabled: d || x,
...h,
children: _
}
);
}
export {
re as UserButton
};
//# sourceMappingURL=user-button.js.map