Usage Meter

1import { cn } from '@/lib/utils'
2 
3export interface UsageMeterValueProps {
4  children: React.ReactNode
5  className?: string
6}
7 
8export const UsageMeterValue = ({ children, className }: UsageMeterValueProps) => {
9  return (
10    <span className={cn('text-2xl font-semibold tracking-tight', className)}>
11      {children}
12    </span>
13  )
14}
15 
16export interface UsageMeterLimitProps {
17  children: React.ReactNode
18  className?: string
19}
20 
21export const UsageMeterLimit = ({ children, className }: UsageMeterLimitProps) => {
22  return (
23    <span className={cn('text-sm text-muted-foreground', className)}>{children}</span>
24  )
25}
26 
27export interface UsageMeterStatusProps {
28  children?: React.ReactNode
29  className?: string
30  percentage: number
31  warningThreshold?: number
32}
33 
34export const UsageMeterStatus = ({
35  children,
36  className,
37  percentage,
38  warningThreshold = 80,
39}: UsageMeterStatusProps) => {
40  const safePercentage = Number.isFinite(percentage) ? percentage : 0
41  const normalized = Math.min(100, Math.max(0, safePercentage))
42  const isCritical = normalized >= 95
43  const isWarning = normalized >= warningThreshold
44 
45  const defaultMessage = isCritical ? 'Critical' : isWarning ? 'Warning' : 'Normal'
46 
47  return (
48    <span
49      className={cn(
50        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
51        isCritical
52          ? 'bg-destructive/10 text-destructive'
53          : isWarning
54            ? 'bg-amber-500/10 text-amber-600 dark:text-amber-500'
55            : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-500',
56        className,
57      )}
58    >
59      {children ?? defaultMessage}
60    </span>
61  )
62}