Usage meter

1import * as React from 'react';
2 
3export interface UsageMeterItem {
4  label: string;
5  used: number;
6  limit: number;
7  unit?: string;
8}
9 
10export interface UsageMeterProps {
11  items: UsageMeterItem[];
12  title?: string;
13  description?: string;
14  className?: string;
15}
16 
17function cn(...classes: Array<string | false | null | undefined>) {
18  return classes.filter(Boolean).join(' ');
19}
20 
21function usageTone(percent: number) {
22  if (percent >= 90) return 'bg-destructive';
23  if (percent >= 75) return 'bg-amber-500';
24  return 'bg-primary';
25}
26 
27export function UsageMeter({
28  items,
29  title = 'Usage',
30  description = 'Track payment and billing limits before customers hit them.',
31  className,
32}: UsageMeterProps) {
33  return (
34    <section
35      className={cn(
36        'w-full max-w-xl rounded-sm border bg-card p-5 text-card-foreground shadow-sm',
37        className,
38      )}
39    >
40      <h3 className="text-base font-semibold">{title}</h3>
41      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
42      <div className="mt-5 space-y-4">
43        {items.map((item) => {
44          const percent = Math.min(
45            Math.round((item.used / item.limit) * 100),
46            100,
47          );
48          return (
49            <div key={item.label} className="space-y-2">
50              <div className="flex items-center justify-between gap-4 text-sm">
51                <span className="font-medium">{item.label}</span>
52                <span className="text-muted-foreground">
53                  {item.used.toLocaleString()} / {item.limit.toLocaleString()}
54                  {item.unit ? ` ${item.unit}` : ''}
55                </span>
56              </div>
57              <div className="h-2 overflow-hidden rounded-full bg-secondary">
58                <div
59                  className={cn(
60                    'h-full rounded-full transition-all',
61                    usageTone(percent),
62                  )}
63                  style={{ width: `${percent}%` }}
64                />
65              </div>
66            </div>
67          );
68        })}
69      </div>
70    </section>
71  );
72}