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