@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.58 kB
JavaScript
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useTheme as t,Stack as o,Box as a}from"@mui/material";import s from"../../BrandCore/Icon/Icon.js";import l from"../Typography/Typography.js";const n=({buttons:s,message:n,status:i="neutral",variation:u="sm"})=>{const d=t();return e(o,{sx:{backgroundColor:d.custom.palette.surface.overlay,borderRadius:d.spacing(d.custom.radius.lg),boxShadow:d.custom.elevation.overlay,color:d.custom.palette.text.primaryInverted,display:"flex",flex:1,gap:1,p:2},children:r(a,{sx:{display:"flex",flex:1,flexDirection:"sm"===u?"row":"column",gap:2},children:[r(a,{sx:{display:"flex",flex:1,gap:1},children:["neutral"!==i&&e(c,{status:i}),e(a,{sx:{display:"flex"},children:e(l,{variation:"md",component:"p",sx:{px:1,pt:.5},children:n})})]}),s&&e(a,{sx:{alignItems:"center",display:"flex",gap:2,justifyContent:"flex-end"},children:s})]})})},c=({status:r})=>{const o=t();switch(r){case"neutral":return null;case"success":return e(i,{backgroundColor:o.custom.palette.green[500],name:"check-circle"});case"warning":return e(i,{backgroundColor:o.custom.palette.yellow[500],name:"error"});case"danger":return e(i,{backgroundColor:o.custom.palette.red[500],name:"warning"});case"discover":return e(i,{backgroundColor:o.custom.palette.purple[500],name:"lightbulb"})}},i=({backgroundColor:r,name:o})=>{const l=t();return e(a,{sx:{display:"flex",alignItems:"flex-start",pt:.25},children:e(a,{sx:{backgroundColor:r,borderRadius:l.custom.radius.round,color:l.custom.palette.white,display:"flex",p:.5},children:e(s,{name:o,size:20})})})};export{n as default};