{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-07",
  "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-07.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 UsageMeter7Props {\n  icon: LucideIcon\n  limit: number\n  onUpgrade?: () => void\n  title: string\n  unit: string\n  used: number\n}\n\nconst exampleProps: UsageMeter7Props = {\n  icon: Database,\n  limit: 1500,\n  title: 'Storage',\n  unit: 'MB',\n  used: 430,\n}\n\nconst UsageMeter7 = (props: UsageMeter7Props) => {\n  const { icon: IconComponent, limit, onUpgrade, title, unit, used } = props\n  const remaining = limit - used\n\n  return (\n    <Card className='overflow-hidden pb-0'>\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='relative h-[150px]'>\n        <AnimatedWave percentage={100} />\n        <div className='absolute inset-0 z-10 flex flex-col items-center justify-center space-y-3 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-sm'>\n            <AnimatedNumber value={used} formatter={(value) => value.toLocaleString()} />{' '}\n            {unit} / {limit} {unit} used\n          </div>\n        </div>\n      </div>\n    </Card>\n  )\n}\n\nexport { UsageMeter7, exampleProps as usageMeter7ExampleProps, type UsageMeter7Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}