usage-meter-08

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 UsageMeter8Props {
11  daysLeft?: number
12  icon: LucideIcon
13  limit: number
14  onUpgrade?: () => void
15  title: string
16  unit: string
17  used: number
18}
19 
20const exampleProps: UsageMeter8Props = {
21  daysLeft: 27,
22  icon: Database,
23  limit: 1500,
24  title: 'Storage',
25  unit: 'MB',
26  used: 430,
27}
28 
29const UsageMeter8 = (props: UsageMeter8Props) => {
30  const { daysLeft, icon: IconComponent, limit, onUpgrade, title, unit, used } = props
31  const remaining = limit - used
32  const availablePercentage = Math.round((remaining / limit) * 100)
33 
34  return (
35    <Card>
36      <CardHeader className='flex items-center justify-between'>
37        <div className='flex items-center gap-2'>
38          <Icon icon={IconComponent} size='sm' />
39          <CardTitle>{title}</CardTitle>
40        </div>
41        {onUpgrade && (
42          <Button variant='outline' size='sm' onClick={onUpgrade}>
43            Upgrade
44          </Button>
45        )}
46      </CardHeader>
47      <div className='space-y-6 pb-6'>
48        <div className='flex justify-center'>
49          <div className='relative size-[200px] overflow-hidden rounded-full bg-muted shadow-md'>
50            <AnimatedWave percentage={85} />
51            <div className='absolute inset-0 z-10 flex flex-col items-center justify-center space-y-2 text-center text-primary-foreground'>
52              <div className='space-y-1'>
53                <div className='text-sm font-medium tracking-wider'>REMAINING</div>
54                <div className='flex items-start gap-1 text-4xl font-bold leading-none'>
55                  <AnimatedNumber
56                    value={remaining}
57                    formatter={(value) => value.toLocaleString()}
58                  />
59                  <span className='text-sm font-medium'>{unit}</span>
60                </div>
61              </div>
62              <div className='text-xs'>
63                {used} {unit} / {limit} {unit} used
64              </div>
65            </div>
66          </div>
67        </div>
68        <div
69          className={`grid gap-4 px-6 ${daysLeft !== undefined ? 'grid-cols-3' : 'grid-cols-2'}`}
70// … truncated