usage-meter-03

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'
5 
6import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'
7 
8interface ResourceUsage {
9  limit: number
10  name: string
11  unit: string
12  used: number
13}
14 
15interface UsageMeter3Props {
16  resources: ResourceUsage[]
17  title: string
18}
19 
20const exampleProps: UsageMeter3Props = {
21  resources: [
22    { name: 'CPU', used: 45, limit: 100, unit: '%' },
23    { name: 'Memory', used: 6.2, limit: 8, unit: 'GB' },
24    { name: 'Bandwidth', used: 847, limit: 1000, unit: 'GB' },
25  ],
26  title: 'Resource Usage',
27}
28 
29const UsageMeter3 = (props: UsageMeter3Props) => {
30  const { resources, title } = props
31  return (
32    <Card>
33      <CardContent className='space-y-4'>
34        <CardTitle className='text-base font-medium'>{title}</CardTitle>
35        <div className='space-y-4'>
36          {resources.map((resource) => {
37            const percentage = (resource.used / resource.limit) * 100
38            const safePercentage = Number.isFinite(percentage) ? percentage : 0
39            const normalized = Math.min(100, Math.max(0, safePercentage))
40            const fillClassName =
41              normalized >= 95
42                ? 'bg-destructive'
43                : normalized >= 80
44                  ? 'bg-amber-500'
45                  : undefined
46            return (
47              <div key={resource.name} className='space-y-1'>
48                <div className='flex items-end justify-between text-sm'>
49                  <span className='font-medium'>{resource.name}</span>
50                  <span className='text-xs text-muted-foreground'>
51                    <AnimatedNumber
52                      value={resource.used}
53                      formatter={(value) => value.toLocaleString()}
54                    />{' '}
55                    / {resource.limit.toLocaleString()}
56                    {resource.unit}
57                  </span>
58                </div>
59                <ProgressBar percentage={percentage} fillClassName={fillClassName} />
60              </div>
61            )
62          })}
63        </div>
64        <CardDescription className='text-xs'>Updated just now</CardDescription>
65      </CardContent>
66    </Card>
67  )
68}
69 
70export {
71  UsageMeter3,
72  exampleProps as usageMeter3ExampleProps,
73  type UsageMeter3Props,
74  type ResourceUsage,
75}