Progress

import * as React from 'react'
import { Progress } from '@hamur/react/progress'

export default function ProgressExample() {
  const [value, setValue] = React.useState<number | null>(20)
  return (
    <div className="stack">
      <Progress.Root className="range" value={value}>
        <div className="range-head">
          <Progress.Label>Uploading</Progress.Label>
          <Progress.Value className="muted" />
        </div>
        <Progress.Track className="range-track">
          <Progress.Indicator className="range-fill" />
        </Progress.Track>
      </Progress.Root>
      <div className="row">
        <button
          type="button"
          className="button"
          onClick={() => setValue((current) => Math.min(100, (current ?? 0) + 20))}
        >
          Add 20
        </button>
        <button type="button" className="button" onClick={() => setValue(null)}>
          Indeterminate
        </button>
        <button type="button" className="button" onClick={() => setValue(20)}>
          Reset
        </button>
      </div>
    </div>
  )
}