{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resource-quota-grid",
  "type": "registry:ui",
  "title": "Resource quota grid",
  "description": "Responsive grid of quota cards, one per resource, each with a labelled usage bar showing used over max. Useful for infra limits like builds, storage and seats.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/quota-bar.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/resource-quota-grid.tsx",
      "type": "registry:ui",
      "target": "components/ui/resource-quota-grid.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { QuotaBar } from \"@/components/ui/quota-bar\"\n\n/** A responsive grid of quota cards, one bar per metered resource, for plan and usage pages. */\ntype Quota = { label: string; used: number; max: number }\n\ntype ResourceQuotaGridProps = {\n  /** Metered resources to show. Defaults to a Lumen workspace on the Scale plan. */\n  items?: Quota[]\n  className?: string\n}\n\nconst SAMPLE_QUOTAS: Quota[] = [\n  { label: \"API requests\", used: 84200, max: 100000 },\n  { label: \"Seats\", used: 18, max: 25 },\n  { label: \"Storage (GB)\", used: 38, max: 50 },\n  { label: \"Build minutes\", used: 2340, max: 3000 },\n  { label: \"Webhook endpoints\", used: 142, max: 500 },\n  { label: \"Environments\", used: 3, max: 5 },\n]\n\nfunction ResourceQuotaGrid({ items = SAMPLE_QUOTAS, className }: ResourceQuotaGridProps) {\n  return (\n    <div data-slot=\"resource-quota-grid\" className={cn(\"grid w-full gap-4 sm:grid-cols-2\", className)}>\n      {items.map((q) => (\n        <div key={q.label} className=\"rounded-xl border border-border bg-surface p-4\">\n          <QuotaBar label={q.label} used={q.used} max={q.max} />\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { ResourceQuotaGrid }\nexport type { ResourceQuotaGridProps, Quota }\n"
    }
  ]
}