@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
84 lines (83 loc) • 2.99 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _FlagOutput = require("../FlagOutput");
var _LinearProgressBar = require("../LinearProgressBar");
var _jsxRuntime = require("react/jsx-runtime");
var OutputProgressBar = function OutputProgressBar(props) {
var theme = (0, _material.useTheme)();
var mqMobile = (0, _material.useMediaQuery)(theme.breakpoints.down('sm'));
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
container: true,
direction: "column",
mt: "30px",
rowGap: "25px",
mb: "50px",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
item: true,
container: true,
justifyContent: "space-between",
direction: mqMobile ? 'column' : 'row',
rowGap: "10px",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
item: true,
xs: true,
container: true,
direction: "column",
rowGap: "10px",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
fontSize: "20px",
fontWeight: 700,
children: props.title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
fontSize: "18px",
fontWeight: 400,
color: "gray",
children: props.description
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlagOutput.FlagOutput, {
color: props.colorFlag || '#F0F2F3',
variant: "outlined",
children: props.textFlag
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
item: true,
container: true,
justifyContent: "space-between",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
fontSize: "18px",
fontWeight: 700,
children: props.itemText
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
fontSize: "18px",
fontWeight: 700,
children: props.percentage
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
item: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgressBar.LinearProgressBar, {
borderRadius: 15,
height: "15px",
colorBar: props.colorBar,
backgroundColorBar: props.backgroundColorBar,
variant: "determinate",
value: props.valueProgressBar
})
}), props.children]
});
};
var _default = exports["default"] = OutputProgressBar;