Usage MeterUsage Meter

이번 달 사용량을 막대와 설명으로 보여주는 카드입니다.A card that shows this month's usage as a bar with a caption.

@horon-ai/react 표시Display

Solid

Usage this month

6,420 of 10,000 tasksResets Nov 1

Glass

Usage this month

6,420 of 10,000 tasksResets Nov 1

tsx

import { UsageMeter } from "@horon-ai/react";

export default function UsageMeterDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      <div className="flex flex-col gap-3">
        <p className="text-caption text-text-secondary">Solid</p>
        <div className="flex w-full flex-wrap items-center justify-center gap-4">
          <UsageMeter
            surface="solid"
            label="Usage this month"
            value={64}
            detail="6,420 of 10,000 tasks"
            note="Resets Nov 1"
          />
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-caption text-text-secondary">Glass</p>
        <>
          <UsageMeter
            surface="glass"
            label="Usage this month"
            value={64}
            detail="6,420 of 10,000 tasks"
            note="Resets Nov 1"
          />
        </>
      </div>
    </div>
  );
}