Right now mostly extracted from configuration-manager and SilverBullet+'s dashboard. Will be used in more plugs moving forward.
17 lines
392 B
TypeScript
17 lines
392 B
TypeScript
import { cx } from "./cx.ts";
|
|
|
|
export type ProgressProps = {
|
|
/** 0..1 */
|
|
value: number;
|
|
class?: string;
|
|
};
|
|
|
|
export function Progress({ value, class: extra }: ProgressProps) {
|
|
const pct = Math.max(0, Math.min(1, value)) * 100;
|
|
return (
|
|
<div class={cx("sb-progress", extra)} role="progressbar">
|
|
<div class="sb-progress-bar" style={{ width: `${pct}%` }} />
|
|
</div>
|
|
);
|
|
}
|