{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-03",
  "registryDependencies": [
    "card",
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/progress-bar.json",
    "https://dashboardblocks.com/r/usage-meter.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/usage-meter/usage-meter-03.tsx",
      "content": "'use client'\n\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'\n\nimport { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'\n\ninterface ResourceUsage {\n  limit: number\n  name: string\n  unit: string\n  used: number\n}\n\ninterface UsageMeter3Props {\n  resources: ResourceUsage[]\n  title: string\n}\n\nconst exampleProps: UsageMeter3Props = {\n  resources: [\n    { name: 'CPU', used: 45, limit: 100, unit: '%' },\n    { name: 'Memory', used: 6.2, limit: 8, unit: 'GB' },\n    { name: 'Bandwidth', used: 847, limit: 1000, unit: 'GB' },\n  ],\n  title: 'Resource Usage',\n}\n\nconst UsageMeter3 = (props: UsageMeter3Props) => {\n  const { resources, title } = props\n  return (\n    <Card>\n      <CardContent className='space-y-4'>\n        <CardTitle className='text-base font-medium'>{title}</CardTitle>\n        <div className='space-y-4'>\n          {resources.map((resource) => {\n            const percentage = (resource.used / resource.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\n                ? 'bg-destructive'\n                : normalized >= 80\n                  ? 'bg-amber-500'\n                  : undefined\n            return (\n              <div key={resource.name} className='space-y-1'>\n                <div className='flex items-end justify-between text-sm'>\n                  <span className='font-medium'>{resource.name}</span>\n                  <span className='text-xs text-muted-foreground'>\n                    <AnimatedNumber\n                      value={resource.used}\n                      formatter={(value) => value.toLocaleString()}\n                    />{' '}\n                    / {resource.limit.toLocaleString()}\n                    {resource.unit}\n                  </span>\n                </div>\n                <ProgressBar percentage={percentage} fillClassName={fillClassName} />\n              </div>\n            )\n          })}\n        </div>\n        <CardDescription className='text-xs'>Updated just now</CardDescription>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport {\n  UsageMeter3,\n  exampleProps as usageMeter3ExampleProps,\n  type UsageMeter3Props,\n  type ResourceUsage,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}