usage-meter-04

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 { Trend } from '@/registry/components/dashboardblocks/trend'
7import { UsageMeterValue } from '@/registry/components/dashboardblocks/usage-meter'
8import { Coins } from 'lucide-react'
9 
10import { Card, CardContent, CardTitle } from '@/components/ui/card'
11 
12interface UsageMeter4Props {
13  remaining: number
14  title: string
15  total: number
16  trend: number
17}
18 
19const exampleProps: UsageMeter4Props = {
20  remaining: 45750,
21  title: 'Credits Remaining',
22  total: 100000,
23  trend: -1250,
24}
25 
26const UsageMeter4 = (props: UsageMeter4Props) => {
27  const { remaining, title, total, trend } = props
28  const used = total - remaining
29  const percentage = (used / total) * 100
30  const daysRemaining = Math.round(remaining / Math.abs(trend))
31 
32  return (
33    <Card>
34      <CardContent className='space-y-3'>
35        <div className='flex items-center justify-between'>
36          <div className='flex items-center gap-2'>
37            <Icon icon={Coins} size='sm' />
38            <CardTitle>{title}</CardTitle>
39          </div>
40          <Trend
41            trend={trend}
42            formatter={(value) => `${value > 0 ? '+' : ''}${value.toLocaleString()}/day`}
43          />
44        </div>
45        <div>
46          <UsageMeterValue>
47            <AnimatedNumber
48              value={remaining}
49              formatter={(value) => value.toLocaleString()}
50            />
51          </UsageMeterValue>
52          <ProgressBar percentage={100 - percentage} fillClassName='bg-emerald-500' />
53        </div>
54        <div className='flex items-center justify-between text-sm text-muted-foreground'>
55          <span>
56            <AnimatedNumber value={used} formatter={(value) => value.toLocaleString()} />{' '}
57            used
58          </span>
59          <span>~{daysRemaining} days remaining</span>
60        </div>
61      </CardContent>
62    </Card>
63  )
64}
65 
66export { UsageMeter4, exampleProps as usageMeter4ExampleProps, type UsageMeter4Props }