@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
66 lines (65 loc) • 3.49 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
const ProgressBar = ({ progress, tick = false, children })=>/*#__PURE__*/ jsxs("div", {
children: [
/*#__PURE__*/ jsxs("div", {
className: "cobalt-ProgressBar__TitleSection",
children: [
/*#__PURE__*/ jsxs("div", {
children: [
/*#__PURE__*/ jsxs("div", {
className: "cobalt-ProgressBar__Progression",
children: [
progress,
"%"
]
}),
/*#__PURE__*/ jsx("div", {
className: "cobalt-ProgressBar__Title",
children: children
})
]
}),
100 === progress && /*#__PURE__*/ jsx("div", {
className: "cobalt-ProgressBar__CompletedCheckbox",
children: /*#__PURE__*/ jsxs("svg", {
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: [
/*#__PURE__*/ jsx("title", {
children: children
}),
/*#__PURE__*/ jsx("g", {
fill: "none",
fillRule: "evenodd",
stroke: "none",
strokeWidth: "1",
children: /*#__PURE__*/ jsx("path", {
d: "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M10.039794,16.4579825 L10.3868138,16.8048824 C10.7382605,17.1562077 11.3079394,17.1562077 11.6593861,16.8048824 L12.0064058,16.4579825 L18.3862862,10.0803058 C18.7379046,9.72880879 18.7379046,9.15879074 18.3862862,8.80729375 L17.6922467,8.11349398 C17.3408,7.76216867 16.771121,7.76216867 16.4196743,8.11349398 L11.0398301,13.5249288 L8.08032565,10.5664466 C7.72887895,10.2151213 7.15920001,10.2151213 6.80775331,10.5664466 L6.11371383,11.2602463 C5.76209539,11.6117433 5.76209539,12.1817614 6.11371383,12.5332584 L10.039794,16.4579825 Z",
fill: "#b4bbc6"
})
})
]
})
})
]
}),
/*#__PURE__*/ jsxs("div", {
className: "cobalt-ProgressBar__Container",
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-ProgressBar__Foreground",
style: {
width: `${progress}%`
}
}),
tick && /*#__PURE__*/ jsx("div", {
className: "cobalt-ProgressBar__Tick"
})
]
})
]
});
export { ProgressBar };
//# sourceMappingURL=index.js.map