@onwave/ui
Version:
onwave ui library
26 lines • 1.99 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from "@emotion/styled";
import React from "react";
export var ProgressBar = function (_a) {
var strokeColor = _a.strokeColor, backgroundColor = _a.backgroundColor, percent = _a.percent;
return (React.createElement(Wrapper, null,
React.createElement(Container, { color: backgroundColor },
React.createElement(Filler, { color: strokeColor, percent: percent }))));
};
var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n padding: padding;\n width: 100%;\n height: 10px;\n border-radius: 50px;\n"], ["\n background-color: ", ";\n padding: padding;\n width: 100%;\n height: 10px;\n border-radius: 50px;\n"])), function (_a) {
var color = _a.color;
return color !== null && color !== void 0 ? color : "#fff";
});
var Filler = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: 10px;\n background-color: ", ";\n transition: width 1s ease-in-out;\n border-radius: inherit;\n display: flex;\n align-items: center;\n"], ["\n width: ", ";\n height: 10px;\n background-color: ", ";\n transition: width 1s ease-in-out;\n border-radius: inherit;\n display: flex;\n align-items: center;\n"])), function (_a) {
var percent = _a.percent;
return (percent > 100 ? "100%" : percent + "%");
}, function (_a) {
var color = _a.color;
return color !== null && color !== void 0 ? color : "#fe8c6a";
});
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=index.js.map