@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.63 kB
JavaScript
import{jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as a}from"react";import o from"@mui/material/Avatar";import i from"@mui/material/Tooltip";import e from"@mui/icons-material/Person";import{useTheme as l}from"@mui/material/styles";import{StyledBadge as s}from"./StatusAvatar.styles.js";import{getInitials as n,getHighlightColor as m,getContrastTextColor as d}from"../util/functions/index.js";const c="NexusStatusAvatar",u={available:"success.light",away:"grey.300",offline:"error.main"},p=p=>{const{status:f,backgroundColor:g,textColor:v,disabled:b,"data-testid":h,id:y,email:x,firstName:$,lastName:A,avatar:k,tooltip:C,statusMapping:N=u,sx:j,...S}=p,w=l(),M=n($,A),P=g||m(w,M),[z,B]=r(d(w,P,v));a((()=>{"undefined"==typeof document||/^(#|rgb\(|rgba\(|hsl\(|hsla\()/.test(P)||B(d(w,P,v))}),[w,P,v]);let I=t(o,{role:"img","aria-label":`${$} ${A}`,"data-testid":h||`${c}-root`,className:`${c}-root`,translate:"no",...S,sx:[{backgroundColor:P,color:z,...w.applyStyles("dark",{backgroundColor:P,color:z})},b?{opacity:.5,cursor:"default"}:{},...Array.isArray(j)?j:[j]],children:M||t(e,{"data-testid":`${c}-defaultIcon`,color:"inherit"})});return C&&(I=t(i,{slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,-6]}}]}},title:t("div",{translate:"no",children:C}),arrow:!0,children:I})),f?t(s,{component:"div","data-testid":`${c}-badge`,overlap:"circular"===S.variant||void 0===S.variant?"circular":"rectangular",anchorOrigin:{vertical:"bottom",horizontal:"right"},variant:"dot",sx:[{"& .MuiBadge-badge":{bgcolor:f?N[f]:void 0}},b?{opacity:.5,cursor:"default"}:{}],children:I}):I};export{p as StatusAvatar};