@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.65 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react"),n=require("../../BrandCore/Icon/Icon.js"),o=require("../Avatar/Avatar.js"),s=require("../Typography/Typography.js");const i=t.styled(t.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between"})),a=t.styled(t.Stack,{shouldForwardProp:e=>!["withMenu"].includes(e)})(({withMenu:e})=>({textAlign:"left",width:e?118:152,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),d=t.styled(t.Stack)(({theme:e})=>({alignItems:"center",color:e.custom.palette.icon.secondary,display:"flex",justifyContent:"center"})),c=t.styled(t.Button,{shouldForwardProp:e=>!["active","rounded"].includes(e)})(({active:e,rounded:t,theme:r})=>({backgroundColor:e?r.custom.palette.interaction.press:"transparent",borderRadius:r.spacing(t?r.custom.radius.round:r.custom.radius.md),justifyContent:"flex-start",minWidth:0,overflow:"hidden",padding:r.spacing(.5),textTransform:"none",width:"100%","&:hover":{backgroundColor:r.custom.palette.interaction.hover}}));module.exports=({active:u,avatar:l,email:p,name:h,rounded:m,withMenu:x})=>{const j=t.useTheme(),y=r.useRef(null);return e.jsx(c,{active:u,rounded:m,children:e.jsxs(i,{ref:y,children:[e.jsx(o,{src:l,sizing:"sm"}),e.jsx(t.Fade,{in:!0,children:e.jsxs(i,{children:[e.jsxs(a,{withMenu:x,children:[e.jsx(s,{variation:"sm",component:"p",type:"button",noWrap:!0,children:h}),e.jsx(s,{variation:"xs",component:"p",type:"button",noWrap:!0,sx:{color:j.custom.palette.text.secondary},children:p})]}),x&&e.jsx(d,{children:e.jsx(n.default,{name:"chevron-right",size:24})})]})})]})})};