usage-meter-01

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { Icon } from '@/registry/components/dashboardblocks/icon'
5import { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'
6import {
7  UsageMeterLimit,
8  UsageMeterStatus,
9  UsageMeterValue,
10} from '@/registry/components/dashboardblocks/usage-meter'
11import { Activity } from 'lucide-react'
12 
13import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'
14 
15interface UsageMeter1Props {
16  limit: number
17  title: string
18  unit: string
19  used: number
20}
21 
22const exampleProps: UsageMeter1Props = {
23  limit: 10000,
24  title: 'API Requests',
25  unit: 'requests',
26  used: 7234,
27}
28 
29const UsageMeter1 = (props: UsageMeter1Props) => {
30  const { limit, title, unit, used } = props
31  const percentage = (used / limit) * 100
32  const safePercentage = Number.isFinite(percentage) ? percentage : 0
33  const normalized = Math.min(100, Math.max(0, safePercentage))
34  const fillClassName =
35    normalized >= 95 ? 'bg-destructive' : normalized >= 80 ? 'bg-amber-500' : undefined
36 
37  return (
38    <Card>
39      <CardContent className='space-y-4'>
40        <div className='flex items-center justify-between'>
41          <div className='flex items-center gap-2'>
42            <Icon icon={Activity} variant='secondary' size='sm' />
43            <CardTitle className='text-base font-medium'>{title}</CardTitle>
44          </div>
45          <UsageMeterStatus percentage={percentage} />
46        </div>
47        <div className='space-y-1'>
48          <div className='flex items-baseline justify-between'>
49            <UsageMeterValue>
50              <AnimatedNumber
51                value={used}
52                formatter={(value) => value.toLocaleString()}
53              />
54            </UsageMeterValue>
55            <UsageMeterLimit>
56              of {limit.toLocaleString()} {unit}
57            </UsageMeterLimit>
58          </div>
59          <ProgressBar percentage={percentage} fillClassName={fillClassName} />
60        </div>
61        <CardDescription>
62          <AnimatedNumber
63            value={limit - used}
64            formatter={(value) => value.toLocaleString()}
65          />{' '}
66          {unit} remaining this month
67        </CardDescription>
68      </CardContent>
69    </Card>
70  )
71}
72 
73export { UsageMeter1, exampleProps as usageMeter1ExampleProps, type UsageMeter1Props }