{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter-06",
  "registryDependencies": [
    "button",
    "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-06.tsx",
      "content": "'use client'\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { Icon } from '@/registry/components/dashboardblocks/icon'\nimport { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'\nimport { Crown, Database, Mail, Users, Zap } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card'\n\ninterface PlanLimit {\n  icon: LucideIcon\n  limit: number\n  name: string\n  used: number\n}\n\ninterface UsageMeter6Props {\n  limits: PlanLimit[]\n  plan: string\n}\n\nconst exampleProps: UsageMeter6Props = {\n  limits: [\n    { name: 'Team members', used: 4, limit: 5, icon: Users },\n    { name: 'API calls', used: 8500, limit: 10000, icon: Zap },\n    { name: 'Storage', used: 4.9, limit: 5, icon: Database },\n    { name: 'Emails sent', used: 450, limit: 1000, icon: Mail },\n  ],\n  plan: 'Pro',\n}\n\nconst UsageMeter6 = (props: UsageMeter6Props) => {\n  const { limits, plan } = props\n  return (\n    <Card>\n      <CardContent className='space-y-6'>\n        <div className='flex items-center gap-2'>\n          <Icon icon={Crown} size='md' />\n          <CardTitle className='text-base font-medium'>{plan} Plan</CardTitle>\n        </div>\n        <div className='space-y-3'>\n          {limits.map((item) => {\n            const percentage = (item.used / item.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                  : 'bg-emerald-500'\n            const formattedLimit =\n              item.limit >= 1000\n                ? `${(item.limit / 1000).toFixed(0)}k`\n                : item.limit.toString()\n\n            return (\n              <div key={item.name} className='space-y-1'>\n                <div className='flex items-end justify-between text-sm'>\n                  <div className='flex items-center gap-2'>\n                    <item.icon className='h-3.5 w-3.5' />\n                    <span>{item.name}</span>\n                  </div>\n                  <span className='text-xs text-muted-foreground'>\n                    <AnimatedNumber\n                      value={item.used}\n                      formatter={(value) => value.toLocaleString()}\n                    />{' '}\n                    / {formattedLimit}\n                  </span>\n                </div>\n                <ProgressBar\n                  className='h-1.5'\n                  percentage={percentage}\n                  fillClassName={fillClassName}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </CardContent>\n      <CardFooter className='border-t pt-4'>\n        <Button variant='outline' className='w-full'>\n          Upgrade Plan\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport {\n  UsageMeter6,\n  exampleProps as usageMeter6ExampleProps,\n  type UsageMeter6Props,\n  type PlanLimit,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}