| 1 | import { Show } from "solid-js"; |
| 2 | |
| 3 | /** A thin progress bar; `failed` stacks a critical segment after the done one. */ |
| 4 | export function Meter(props: { value: number; max?: number; failed?: number }) { |
| 5 | const width = (part: number) => `${(part / (props.max || 1)) * 100}%`; |
| 6 | return ( |
| 7 | <div class="meter" role="progressbar" aria-valuemin="0" aria-valuemax={props.max ?? 1} aria-valuenow={props.value}> |
| 8 | <span style={{ width: width(props.value) }} /> |
| 9 | <Show when={props.failed}>{(failed) => <span class="failed" style={{ width: width(failed()) }} />}</Show> |
| 10 | </div> |
| 11 | ); |
| 12 | } |