usage-meter-07

1'use client'
2import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
3import { AnimatedWave } from '@/registry/components/dashboardblocks/animated-wave'
4import { Icon } from '@/registry/components/dashboardblocks/icon'
5import { Database, LucideIcon } from 'lucide-react'
6 
7import { Button } from '@/components/ui/button'
8import { Card, CardHeader, CardTitle } from '@/components/ui/card'
9 
10interface UsageMeter7Props {
11  icon: LucideIcon
12  limit: number
13  onUpgrade?: () => void
14  title: string
15  unit: string
16  used: number
17}
18 
19const exampleProps: UsageMeter7Props = {
20  icon: Database,
21  limit: 1500,
22  title: 'Storage',
23  unit: 'MB',
24  used: 430,
25}
26 
27const UsageMeter7 = (props: UsageMeter7Props) => {
28  const { icon: IconComponent, limit, onUpgrade, title, unit, used } = props
29  const remaining = limit - used
30 
31  return (
32    <Card className='overflow-hidden pb-0'>
33      <CardHeader className='flex items-center justify-between'>
34        <div className='flex items-center gap-2'>
35          <Icon icon={IconComponent} size='sm' />
36          <CardTitle>{title}</CardTitle>
37        </div>
38        {onUpgrade && (
39          <Button variant='outline' size='sm' onClick={onUpgrade}>
40            Upgrade
41          </Button>
42        )}
43      </CardHeader>
44      <div className='relative h-[150px]'>
45        <AnimatedWave percentage={100} />
46        <div className='absolute inset-0 z-10 flex flex-col items-center justify-center space-y-3 text-center text-primary-foreground'>
47          <div className='space-y-1'>
48            <div className='text-sm font-medium tracking-wider'>REMAINING</div>
49            <div className='flex items-start gap-1 text-4xl font-bold leading-none'>
50              <AnimatedNumber
51                value={remaining}
52                formatter={(value) => value.toLocaleString()}
53              />
54              <span className='text-sm font-medium'>{unit}</span>
55            </div>
56          </div>
57          <div className='text-sm'>
58            <AnimatedNumber value={used} formatter={(value) => value.toLocaleString()} />{' '}
59            {unit} / {limit} {unit} used
60          </div>
61        </div>
62      </div>
63    </Card>
64  )
65}
66 
67export { UsageMeter7, exampleProps as usageMeter7ExampleProps, type UsageMeter7Props }