Meter

import { Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@unkey/ui";

export default function BasicMeter() {
  return (
    <Meter value={32_400} max={150_000}>
      <MeterHeader>
        <MeterLabel>Key verifications this month</MeterLabel>
        <MeterValue>{() => "32,400 / 150,000"}</MeterValue>
      </MeterHeader>
      <MeterTrack>
        <MeterIndicator className="bg-info-9" />
      </MeterTrack>
    </Meter>
  );
}

import { Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@unkey/ui";

const QUOTA = 150_000;

function indicatorColor(percent: number) {
  if (percent >= 100) {
    return "bg-error-9";
  }
  if (percent >= 80) {
    return "bg-warning-9";
  }
  return "bg-info-9";
}

function QuotaMeter({ label, used }: { label: string; used: number }) {
  const percent = (used / QUOTA) * 100;

  return (
    <Meter value={used} max={QUOTA}>
      <MeterHeader>
        <MeterLabel>{label}</MeterLabel>
        <MeterValue>
          {used.toLocaleString()} / {QUOTA.toLocaleString()}
        </MeterValue>
      </MeterHeader>
      <MeterTrack>
        <MeterIndicator className={indicatorColor(percent)} />
      </MeterTrack>
    </Meter>
  );
}

export default function ThresholdMeter() {
  return (
    <div className="flex flex-col gap-6">
      <QuotaMeter label="Within budget" used={32_400} />
      <QuotaMeter label="Approaching limit" used={132_000} />
      <QuotaMeter label="Limit reached" used={150_000} />
    </div>
  );
}

import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@unkey/ui";

export default function InlineMeter() {
  return (
    <Meter layout="inline" value={7_700_000} max={10_000_000}>
      <MeterLabel className="w-40 shrink-0">Monthly API operations</MeterLabel>
      <MeterValue className="w-24 shrink-0 text-right font-normal text-gray-11">
        {() => "7,700,000"}
      </MeterValue>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
      <span className="w-24 shrink-0 text-right text-gray-12 text-sm tabular-nums">10,000,000</span>
    </Meter>
  );
}