{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-14",
  "type": "registry:block",
  "title": "Stats with Usage Breakdown",
  "description": "A stats with usage breakdown block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "badge",
    "card"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/stats/stats-14.tsx",
      "type": "registry:component",
      "target": "components/stats-14.tsx",
      "content": "import { Badge } from '@/components/ui/badge';\nimport { Card, CardContent } from '@/components/ui/card';\n\ninterface UsageItem {\n  label: string;\n  amount: number;\n  percentage: number;\n  color: 'emerald' | 'amber' | 'rose';\n}\n\nconst data: UsageItem[] = [\n  { label: 'Compute', amount: 450, percentage: 52.3, color: 'emerald' },\n  { label: 'Storage', amount: 285, percentage: 33.1, color: 'amber' },\n  { label: 'Bandwidth', amount: 125, percentage: 14.6, color: 'rose' },\n];\n\nconst colorClasses = {\n  emerald: 'bg-emerald-500 dark:bg-emerald-400',\n  amber: 'bg-amber-500 dark:bg-amber-400',\n  rose: 'bg-rose-500 dark:bg-rose-400',\n};\n\nexport function Stats14() {\n  return (\n    <Card className=\"w-full max-w-sm shadow-none\">\n      <CardContent className=\"flex flex-col justify-between pt-0\">\n        <div>\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"text-balance font-bold text-foreground text-sm\">\n              Usage\n            </h3>\n            <Badge\n              className=\"bg-amber-50 text-amber-700 ring-1 ring-amber-500/30 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-400/20\"\n              variant=\"secondary\"\n            >\n              +12.5%\n            </Badge>\n          </div>\n\n          <p className=\"mt-2 flex items-baseline gap-2 text-pretty\">\n            <span className=\"text-foreground text-xl\">$860</span>\n            <span className=\"text-muted-foreground text-sm\">this month</span>\n          </p>\n\n          <div className=\"mt-4\">\n            <p className=\"text-pretty font-medium text-foreground text-sm\">\n              Resource breakdown\n            </p>\n            <div className=\"mt-2 flex items-center gap-0.5\">\n              {data.map((item, index) => (\n                <div\n                  className={`${colorClasses[item.color]} h-1.5 rounded-xs`}\n                  key={index}\n                  style={{ width: `${item.percentage}%` }}\n                />\n              ))}\n            </div>\n          </div>\n\n          <ul className=\"mt-5 space-y-2\" role=\"list\">\n            {data.map((item, index) => (\n              <li className=\"flex items-center gap-2 text-xs\" key={index}>\n                <span\n                  aria-hidden=\"true\"\n                  className={`${colorClasses[item.color]} size-2.5 rounded-xs`}\n                />\n                <span className=\"text-foreground\">{item.label}</span>\n                <span className=\"text-muted-foreground\">\n                  (${item.amount} / {item.percentage}%)\n                </span>\n              </li>\n            ))}\n          </ul>\n        </div>\n\n        <p className=\"mt-6 text-pretty text-muted-foreground text-xs\">\n          Configure limits in{' '}\n          <a\n            className=\"text-emerald-600 hover:underline dark:text-emerald-400\"\n            href=\"#\"\n          >\n            resource settings.\n          </a>\n        </p>\n      </CardContent>\n    </Card>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}