@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
77 lines • 2.39 kB
JavaScript
import React from 'react';
import { Grid, Typography, useMediaQuery, useTheme } from '@mui/material';
import { FlagOutput } from '../FlagOutput';
import { LinearProgressBar } from '../LinearProgressBar';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var OutputProgressBar = function OutputProgressBar(props) {
var theme = useTheme();
var mqMobile = useMediaQuery(theme.breakpoints.down('sm'));
return /*#__PURE__*/_jsxs(Grid, {
container: true,
direction: "column",
mt: "30px",
rowGap: "25px",
mb: "50px",
children: [/*#__PURE__*/_jsxs(Grid, {
item: true,
container: true,
justifyContent: "space-between",
direction: mqMobile ? 'column' : 'row',
rowGap: "10px",
children: [/*#__PURE__*/_jsxs(Grid, {
item: true,
xs: true,
container: true,
direction: "column",
rowGap: "10px",
children: [/*#__PURE__*/_jsx(Typography, {
fontSize: "20px",
fontWeight: 700,
children: props.title
}), /*#__PURE__*/_jsx(Typography, {
fontSize: "18px",
fontWeight: 400,
color: "gray",
children: props.description
})]
}), /*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(FlagOutput, {
color: props.colorFlag || '#F0F2F3',
variant: "outlined",
children: props.textFlag
})
})]
}), /*#__PURE__*/_jsxs(Grid, {
item: true,
container: true,
justifyContent: "space-between",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(Typography, {
fontSize: "18px",
fontWeight: 700,
children: props.itemText
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(Typography, {
fontSize: "18px",
fontWeight: 700,
children: props.percentage
})
})]
}), /*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(LinearProgressBar, {
borderRadius: 15,
height: "15px",
colorBar: props.colorBar,
backgroundColorBar: props.backgroundColorBar,
variant: "determinate",
value: props.valueProgressBar
})
}), props.children]
});
};
export default OutputProgressBar;