{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-02",
  "registryDependencies": [
    "card",
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/ring.json",
    "https://dashboardblocks.com/r/usage-meter.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/usage-meter/usage-meter-02.tsx",
      "content": "'use client'\n\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { Ring } from '@/registry/components/dashboardblocks/ring'\nimport {\n  UsageMeterLimit,\n  UsageMeterValue,\n} from '@/registry/components/dashboardblocks/usage-meter'\n\nimport { Card, CardContent, CardTitle } from '@/components/ui/card'\n\ninterface UsageMeter2Props {\n  limit: number\n  title: string\n  unit: string\n  used: number\n}\n\nconst exampleProps: UsageMeter2Props = {\n  limit: 120,\n  title: 'Storage',\n  unit: 'GB',\n  used: 78,\n}\n\nconst UsageMeter2 = (props: UsageMeter2Props) => {\n  const { limit, title, unit, used } = props\n  const percentage = (used / limit) * 100\n  const isCritical = percentage >= 95\n  const isWarning = percentage >= 80\n\n  const ringColor = isCritical\n    ? 'hsl(var(--destructive))'\n    : isWarning\n      ? 'hsl(38 92% 50%)'\n      : 'var(--color-primary)'\n\n  return (\n    <Card>\n      <CardContent>\n        <div className='flex items-center gap-6'>\n          <Ring\n            className='h-24 w-24'\n            percentage={percentage}\n            ringColor={ringColor}\n            strokeWidth={10}\n          >\n            <AnimatedNumber\n              className='text-lg font-bold'\n              value={percentage}\n              formatter={(value) => `${value.toLocaleString()}%`}\n            />\n          </Ring>\n          <div className='space-y-1'>\n            <CardTitle className='text-base font-medium'>{title}</CardTitle>\n            <div className='flex items-baseline gap-1'>\n              <UsageMeterValue>\n                <AnimatedNumber\n                  value={used}\n                  formatter={(value) => value.toLocaleString()}\n                />\n              </UsageMeterValue>\n              <UsageMeterLimit className='block'>\n                of {limit.toLocaleString()} {unit} used\n              </UsageMeterLimit>\n            </div>\n            <p className='text-sm text-muted-foreground'>\n              <AnimatedNumber\n                value={limit - used}\n                formatter={(value) => value.toLocaleString()}\n              />{' '}\n              {unit} available\n            </p>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport { UsageMeter2, exampleProps as usageMeter2ExampleProps, type UsageMeter2Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}