@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
60 lines (59 loc) • 2.43 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { CheckIcon, ChevronRightIcon } from "../Icon/index.js";
import { ProgressCircular } from "../ProgressCircular/index.js";
function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, href }) {
const Root = null != href ? "a" : "div";
return /*#__PURE__*/ jsxs(Root, {
...null != href ? {
href
} : null,
className: classnames("cobalt-progressBanner", className, {
"cobalt-progressBanner--completed": completed,
"cobalt-progressBanner--fullWidth": fullWidth
}),
children: [
progress && !completed && /*#__PURE__*/ jsx(ProgressCircular, {
size: 48,
progress: 100 * progress.done / progress.total,
animated: animated,
children: /*#__PURE__*/ jsxs("div", {
className: "cobalt-progressBanner__progress-container",
children: [
progress.done,
"/",
progress.total
]
})
}),
completed && /*#__PURE__*/ jsx("div", {
className: classnames("cobalt-progressBanner__completed-icon-container", {
"cobalt-progressBanner__completed-icon-container--animated": animated
}),
children: /*#__PURE__*/ jsx(CheckIcon, {
color: "success",
size: 32
})
}),
/*#__PURE__*/ jsxs("div", {
className: "cobalt-progressBanner__text-container",
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-progressBanner__title",
children: title
}),
/*#__PURE__*/ jsx("div", {
className: "cobalt-progressBanner__description",
children: description
})
]
}),
href && /*#__PURE__*/ jsx("div", {
className: "c-flex",
children: /*#__PURE__*/ jsx(ChevronRightIcon, {})
})
]
});
}
export { ProgressBanner };
//# sourceMappingURL=index.js.map