@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 674 B
JavaScript
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Stack as i,Box as a}from"@mui/material";import n from"../../BrandCore/Icon/Icon.js";import o from"../../WebCore/Typography/Typography.js";const t=({heading:t,ticks:p})=>e(i,{sx:{display:"flex",gap:{sm:2,lg:4}},children:[r(o,{variation:"xl",component:"p",sx:{textAlign:"center"},children:t}),r(a,{sx:{columnGap:2,display:"flex",flex:1,flexWrap:"wrap",justifyContent:"center",rowGap:2},children:p.map((i,p)=>e(a,{sx:{display:"flex",alignItems:"center",gap:1,px:{sm:0,lg:2}},children:[r(n,{name:"badge-tick",size:32}),r(o,{variation:"xxl",component:"p",children:i})]},`tick-group-${t}-${p}`))})]});export{t as default};