@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) • 964 B
JavaScript
import{jsx as r}from"react/jsx-runtime";import o from"@mui/material/Chip";import t from"@mui/material/Tooltip";import{useTheme as a,darken as e}from"@mui/material/styles";import{styles as i}from"./StatusBadge.styles.js";import{standardizeColorToHex as l,getContrastTextColor as s}from"../util/functions/index.js";const m="NexusStatusBadge",c=["error","info","success","warning"],p=p=>{const{color:n="info",tooltip:u,sx:d,...y}=p,g=a(),f=l(g,n),k=r(o,{"data-testid":`${m}-root`,className:`${m}-root`,size:"small",sx:[i.root,c.includes(n)?i[n]:{backgroundColor:f??g.vars.palette.grey[50],color:f?s(g,n):"common.black",...g.applyStyles("dark",{backgroundColor:f??g.vars.palette.grey[50]}),"&.MuiChip-clickable:hover":{backgroundColor:f?e(f,.15):g.vars.palette.grey[200],...g.applyStyles("dark",{backgroundColor:f?e(f,.15):g.vars.palette.grey[200]})}},...Array.isArray(d)?d:[d]],...y});return u?r(t,{title:u,arrow:!0,children:k}):k};export{p as StatusBadgeComponent};