{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-01",
  "registryDependencies": [
    "card",
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/icon.json",
    "https://dashboardblocks.com/r/progress-bar.json",
    "https://dashboardblocks.com/r/usage-meter.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/usage-meter/usage-meter-01.tsx",
      "content": "'use client'\n\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { Icon } from '@/registry/components/dashboardblocks/icon'\nimport { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'\nimport {\n  UsageMeterLimit,\n  UsageMeterStatus,\n  UsageMeterValue,\n} from '@/registry/components/dashboardblocks/usage-meter'\nimport { Activity } from 'lucide-react'\n\nimport { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'\n\ninterface UsageMeter1Props {\n  limit: number\n  title: string\n  unit: string\n  used: number\n}\n\nconst exampleProps: UsageMeter1Props = {\n  limit: 10000,\n  title: 'API Requests',\n  unit: 'requests',\n  used: 7234,\n}\n\nconst UsageMeter1 = (props: UsageMeter1Props) => {\n  const { limit, title, unit, used } = props\n  const percentage = (used / limit) * 100\n  const safePercentage = Number.isFinite(percentage) ? percentage : 0\n  const normalized = Math.min(100, Math.max(0, safePercentage))\n  const fillClassName =\n    normalized >= 95 ? 'bg-destructive' : normalized >= 80 ? 'bg-amber-500' : undefined\n\n  return (\n    <Card>\n      <CardContent className='space-y-4'>\n        <div className='flex items-center justify-between'>\n          <div className='flex items-center gap-2'>\n            <Icon icon={Activity} variant='secondary' size='sm' />\n            <CardTitle className='text-base font-medium'>{title}</CardTitle>\n          </div>\n          <UsageMeterStatus percentage={percentage} />\n        </div>\n        <div className='space-y-1'>\n          <div className='flex items-baseline justify-between'>\n            <UsageMeterValue>\n              <AnimatedNumber\n                value={used}\n                formatter={(value) => value.toLocaleString()}\n              />\n            </UsageMeterValue>\n            <UsageMeterLimit>\n              of {limit.toLocaleString()} {unit}\n            </UsageMeterLimit>\n          </div>\n          <ProgressBar percentage={percentage} fillClassName={fillClassName} />\n        </div>\n        <CardDescription>\n          <AnimatedNumber\n            value={limit - used}\n            formatter={(value) => value.toLocaleString()}\n          />{' '}\n          {unit} remaining this month\n        </CardDescription>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport { UsageMeter1, exampleProps as usageMeter1ExampleProps, type UsageMeter1Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}