usage-meter-02

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { Ring } from '@/registry/components/dashboardblocks/ring'
5import {
6  UsageMeterLimit,
7  UsageMeterValue,
8} from '@/registry/components/dashboardblocks/usage-meter'
9 
10import { Card, CardContent, CardTitle } from '@/components/ui/card'
11 
12interface UsageMeter2Props {
13  limit: number
14  title: string
15  unit: string
16  used: number
17}
18 
19const exampleProps: UsageMeter2Props = {
20  limit: 120,
21  title: 'Storage',
22  unit: 'GB',
23  used: 78,
24}
25 
26const UsageMeter2 = (props: UsageMeter2Props) => {
27  const { limit, title, unit, used } = props
28  const percentage = (used / limit) * 100
29  const isCritical = percentage >= 95
30  const isWarning = percentage >= 80
31 
32  const ringColor = isCritical
33    ? 'hsl(var(--destructive))'
34    : isWarning
35      ? 'hsl(38 92% 50%)'
36      : 'var(--color-primary)'
37 
38  return (
39    <Card>
40      <CardContent>
41        <div className='flex items-center gap-6'>
42          <Ring
43            className='h-24 w-24'
44            percentage={percentage}
45            ringColor={ringColor}
46            strokeWidth={10}
47          >
48            <AnimatedNumber
49              className='text-lg font-bold'
50              value={percentage}
51              formatter={(value) => `${value.toLocaleString()}%`}
52            />
53          </Ring>
54          <div className='space-y-1'>
55            <CardTitle className='text-base font-medium'>{title}</CardTitle>
56            <div className='flex items-baseline gap-1'>
57              <UsageMeterValue>
58                <AnimatedNumber
59                  value={used}
60                  formatter={(value) => value.toLocaleString()}
61                />
62              </UsageMeterValue>
63              <UsageMeterLimit className='block'>
64                of {limit.toLocaleString()} {unit} used
65              </UsageMeterLimit>
66            </div>
67            <p className='text-sm text-muted-foreground'>
68              <AnimatedNumber
69                value={limit - used}
70                formatter={(value) => value.toLocaleString()}
71              />{' '}
72              {unit} available
73            </p>
74          </div>
75        </div>
76      </CardContent>
77    </Card>
78  )
79}
80 
81export { UsageMeter2, exampleProps as usageMeter2ExampleProps, type UsageMeter2Props }