@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.62 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as r,Box as n,Stack as o,Button as i,useTheme as a,Fade as c}from"@mui/material";import{useRef as s}from"react";import d from"../../BrandCore/Icon/Icon.js";import l from"../Avatar/Avatar.js";import p from"../Typography/Typography.js";const m=r(n)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between"})),u=r(o,{shouldForwardProp:e=>!["withMenu"].includes(e)})(({withMenu:e})=>({textAlign:"left",width:e?118:152,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),h=r(o)(({theme:e})=>({alignItems:"center",color:e.custom.palette.icon.secondary,display:"flex",justifyContent:"center"})),f=r(i,{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}})),v=({active:r,avatar:n,email:o,name:i,rounded:v,withMenu:g})=>{const w=a(),y=s(null);return e(f,{active:r,rounded:v,children:t(m,{ref:y,children:[e(l,{src:n,sizing:"sm"}),e(c,{in:!0,children:t(m,{children:[t(u,{withMenu:g,children:[e(p,{variation:"sm",component:"p",type:"button",noWrap:!0,children:i}),e(p,{variation:"xs",component:"p",type:"button",noWrap:!0,sx:{color:w.custom.palette.text.secondary},children:o})]}),g&&e(h,{children:e(d,{name:"chevron-right",size:24})})]})})]})})};export{v as default};