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