{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-04",
  "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/trend.json",
    "https://dashboardblocks.com/r/usage-meter.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/usage-meter/usage-meter-04.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 { Trend } from '@/registry/components/dashboardblocks/trend'\nimport { UsageMeterValue } from '@/registry/components/dashboardblocks/usage-meter'\nimport { Coins } from 'lucide-react'\n\nimport { Card, CardContent, CardTitle } from '@/components/ui/card'\n\ninterface UsageMeter4Props {\n  remaining: number\n  title: string\n  total: number\n  trend: number\n}\n\nconst exampleProps: UsageMeter4Props = {\n  remaining: 45750,\n  title: 'Credits Remaining',\n  total: 100000,\n  trend: -1250,\n}\n\nconst UsageMeter4 = (props: UsageMeter4Props) => {\n  const { remaining, title, total, trend } = props\n  const used = total - remaining\n  const percentage = (used / total) * 100\n  const daysRemaining = Math.round(remaining / Math.abs(trend))\n\n  return (\n    <Card>\n      <CardContent className='space-y-3'>\n        <div className='flex items-center justify-between'>\n          <div className='flex items-center gap-2'>\n            <Icon icon={Coins} size='sm' />\n            <CardTitle>{title}</CardTitle>\n          </div>\n          <Trend\n            trend={trend}\n            formatter={(value) => `${value > 0 ? '+' : ''}${value.toLocaleString()}/day`}\n          />\n        </div>\n        <div>\n          <UsageMeterValue>\n            <AnimatedNumber\n              value={remaining}\n              formatter={(value) => value.toLocaleString()}\n            />\n          </UsageMeterValue>\n          <ProgressBar percentage={100 - percentage} fillClassName='bg-emerald-500' />\n        </div>\n        <div className='flex items-center justify-between text-sm text-muted-foreground'>\n          <span>\n            <AnimatedNumber value={used} formatter={(value) => value.toLocaleString()} />{' '}\n            used\n          </span>\n          <span>~{daysRemaining} days remaining</span>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport { UsageMeter4, exampleProps as usageMeter4ExampleProps, type UsageMeter4Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}