@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.13 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@number-flow/react"),s=require("../../../TestStatus/helpers/index.js");require("../../../TestStatus/TestStatus.js");var a=require("../../../../WebCore/Typography/Typography.js");function o(e){return e&&e.__esModule?e:{default:e}}var n=o(r);module.exports=({animated:r,segment:o,status:i})=>{const u=t.useTheme();return e.jsxs(t.Stack,{children:[e.jsxs(t.Stack,{direction:"row",alignItems:"center",justifyContent:"start",gap:u.spacing(u.custom.padding.xs),children:[e.jsx(a,{monospaced:!0,component:"p",variation:"md",sx:{color:s.getTextColorByStatus(u,i,1e3)},weight:"bold",children:e.jsx(n.default,{value:o.number,animated:r})}),o.totalNumber&&e.jsxs(e.Fragment,{children:[e.jsx(a,{component:"p",variation:"xxs",sx:{color:s.getTextColorByStatus(u,i,1e3)},children:"/"}),e.jsx(a,{monospaced:!0,component:"p",variation:"xxs",sx:{color:s.getTextColorByStatus(u,i,1e3)},children:e.jsx(n.default,{value:o.totalNumber,animated:r})})]})]}),e.jsx(a,{component:"p",variation:"xxs",sx:{color:s.getTextColorByStatus(u,i,1e3)},children:o.label})]})};