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