Meter

import * as React from 'react'
import { Meter } from '@hamur/react/meter'

export default function MeterExample() {
  const [value, setValue] = React.useState(24)
  return (
    <div className="stack">
      <Meter.Root className="range" value={value}>
        <div className="range-head">
          <Meter.Label>Storage used</Meter.Label>
          <Meter.Value className="muted" />
        </div>
        <Meter.Track className="range-track">
          <Meter.Indicator className="range-fill" />
        </Meter.Track>
      </Meter.Root>
      <div className="row">
        <button
          type="button"
          className="button"
          onClick={() => setValue((current) => Math.max(0, current - 10))}
        >
          Free 10
        </button>
        <button
          type="button"
          className="button"
          onClick={() => setValue((current) => Math.min(100, current + 10))}
        >
          Use 10
        </button>
      </div>
    </div>
  )
}