Quota meter

TS

import { … } from "@fungi.computer/caps/components/quota-meter";

Hero

TSX

import { QuotaMeter } from "@fungi.computer/caps/components/quota-meter";

export default function Hero() {
  return (
    <QuotaMeter
      label="Jar storage"
      description="Pickled and dried, this season."
      max={100}
      value={42}
      valueLabel="42 jars"
      maxLabel="100 jars"
      tone="info"
      className="max-w-sm"
    />
  );
}

Tones

TSX

import { QuotaMeter } from "@fungi.computer/caps/components/quota-meter";

export default function Tones() {
  return (
    <div className="grid max-w-sm gap-sm">
      <QuotaMeter
        label="Baskets"
        max={10}
        value={4}
        valueLabel="4"
        maxLabel="10"
      />
      <QuotaMeter
        label="Drying racks"
        max={6}
        value={5}
        valueLabel="5"
        maxLabel="6"
        tone="warning"
      />
      <QuotaMeter
        label="Cold storage"
        max={20}
        value={20}
        valueLabel="20"
        maxLabel="20"
        tone="error"
      />
    </div>
  );
}

Filling

TSX

import { Button } from "@fungi.computer/caps/components/button";
import { QuotaMeter } from "@fungi.computer/caps/components/quota-meter";
import { useState } from "react";

export default function Filling() {
  const [jars, setJars] = useState(6);
  const max = 12;
  return (
    <div className="grid max-w-sm gap-sm">
      <Button
        size="sm"
        disabled={jars >= max}
        onClick={() => {
          setJars((value) => Math.min(max, value + 1));
        }}
      >
        Can another jar
      </Button>
      <QuotaMeter
        label="This harvest's jars"
        max={max}
        value={jars}
        valueLabel={String(jars)}
        maxLabel={String(max)}
        tone={jars >= max ? "error" : "primary"}
      />
    </div>
  );
}

Props

QuotaMeterProps

Prop	Type	Description
label	ReactNode
value	number
max	number
valueLabel?	ReactNode
maxLabel?	ReactNode
description?	ReactNode
indicator?	ReactNode
tone?	ProgressTone

• labelReactNode
• valuenumber
• maxnumber
• valueLabel?ReactNode
• maxLabel?ReactNode
• description?ReactNode
• indicator?ReactNode
• tone?ProgressTone

Full types: API reference.