{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-08",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "button",
    "card",
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/animated-wave.json",
    "https://dashboardblocks.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/usage-meter/usage-meter-08.tsx",
      "content": "'use client'\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { AnimatedWave } from '@/registry/components/dashboardblocks/animated-wave'\nimport { Icon } from '@/registry/components/dashboardblocks/icon'\nimport { Database, LucideIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle } from '@/components/ui/card'\n\ninterface UsageMeter8Props {\n  daysLeft?: number\n  icon: LucideIcon\n  limit: number\n  onUpgrade?: () => void\n  title: string\n  unit: string\n  used: number\n}\n\nconst exampleProps: UsageMeter8Props = {\n  daysLeft: 27,\n  icon: Database,\n  limit: 1500,\n  title: 'Storage',\n  unit: 'MB',\n  used: 430,\n}\n\nconst UsageMeter8 = (props: UsageMeter8Props) => {\n  const { daysLeft, icon: IconComponent, limit, onUpgrade, title, unit, used } = props\n  const remaining = limit - used\n  const availablePercentage = Math.round((remaining / limit) * 100)\n\n  return (\n    <Card>\n      <CardHeader className='flex items-center justify-between'>\n        <div className='flex items-center gap-2'>\n          <Icon icon={IconComponent} size='sm' />\n          <CardTitle>{title}</CardTitle>\n        </div>\n        {onUpgrade && (\n          <Button variant='outline' size='sm' onClick={onUpgrade}>\n            Upgrade\n          </Button>\n        )}\n      </CardHeader>\n      <div className='space-y-6 pb-6'>\n        <div className='flex justify-center'>\n          <div className='relative size-[200px] overflow-hidden rounded-full bg-muted shadow-md'>\n            <AnimatedWave percentage={85} />\n            <div className='absolute inset-0 z-10 flex flex-col items-center justify-center space-y-2 text-center text-primary-foreground'>\n              <div className='space-y-1'>\n                <div className='text-sm font-medium tracking-wider'>REMAINING</div>\n                <div className='flex items-start gap-1 text-4xl font-bold leading-none'>\n                  <AnimatedNumber\n                    value={remaining}\n                    formatter={(value) => value.toLocaleString()}\n                  />\n                  <span className='text-sm font-medium'>{unit}</span>\n                </div>\n              </div>\n              <div className='text-xs'>\n                {used} {unit} / {limit} {unit} used\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className={`grid gap-4 px-6 ${daysLeft !== undefined ? 'grid-cols-3' : 'grid-cols-2'}`}\n        >\n          <div className='flex flex-col items-center space-y-1.5'>\n            <div className='h-[2px] w-12 bg-purple-500' />\n            <div className='text-xs text-muted-foreground'>USED ({unit})</div>\n            <div className='text-2xl font-semibold leading-none'>\n              <AnimatedNumber\n                value={used}\n                formatter={(value) => value.toLocaleString()}\n              />\n            </div>\n          </div>\n          <div className='flex flex-col items-center space-y-1.5'>\n            <div className='h-[2px] w-12 bg-blue-500' />\n            <div className='text-xs text-muted-foreground'>AVAILABLE</div>\n            <div className='text-2xl font-semibold leading-none'>\n              <AnimatedNumber\n                value={availablePercentage}\n                formatter={(value) => `${value}%`}\n              />\n            </div>\n          </div>\n          {daysLeft !== undefined && (\n            <div className='flex flex-col items-center space-y-1.5'>\n              <div className='h-[2px] w-12 bg-green-500' />\n              <div className='text-xs text-muted-foreground'>DAYS LEFT</div>\n              <div className='text-2xl font-semibold leading-none'>\n                <AnimatedNumber\n                  value={daysLeft}\n                  formatter={(value) => value.toLocaleString()}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </Card>\n  )\n}\n\nexport { UsageMeter8, exampleProps as usageMeter8ExampleProps, type UsageMeter8Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}