{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compute",
  "title": "Compute",
  "author": "AlgorizeTech",
  "description": "A compute-resource panel showing instance sizing and usage as a settings-style card. Use it as a starting point for an infrastructure or plan-usage screen.",
  "dependencies": [],
  "registryDependencies": [
    "https://avaraui.com/r/ui-base.json"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/ComputeBlock.tsx",
      "content": "\"use client\";\nimport { useState } from \"react\";\nimport { ComponentCard } from \"../ui/base\";\n\nexport function ComputeBlock() {\n  const [computeEnv, setComputeEnv] = useState<\"kubernetes\" | \"vm\">(\"kubernetes\");\n  const [gpuCount, setGpuCount] = useState(8);\n\n  return (\n    <ComponentCard>\n      <div className=\"p-6 pb-4\">\n        <h3 className=\"font-semibold text-sm\">Compute Environment</h3>\n        <p className=\"text-xs text-muted-foreground mt-1\">Select the compute environment for your cluster.</p>\n      </div>\n      <div className=\"px-6 pb-6 space-y-3\">\n        <div onClick={() => setComputeEnv(\"kubernetes\")} className={`flex items-start justify-between p-3 rounded-lg border cursor-pointer transition-colors ${computeEnv === \"kubernetes\" ? \"border-primary bg-background\" : \"border-border bg-transparent hover:border-border\"}`}>\n          <div className=\"flex items-center gap-3\">\n            <div className={`size-4 rounded-full border-4 flex items-center justify-center transition-colors ${computeEnv === \"kubernetes\" ? \"border-primary\" : \"border-input\"}`}></div>\n            <div>\n              <p className=\"text-sm font-medium\">Kubernetes</p>\n              <p className=\"text-xs text-muted-foreground\">Run workloads on a K8s cluster.</p>\n            </div>\n          </div>\n        </div>\n        <div onClick={() => setComputeEnv(\"vm\")} className={`flex items-start justify-between p-3 rounded-lg border cursor-pointer transition-colors ${computeEnv === \"vm\" ? \"border-primary bg-background\" : \"border-border bg-transparent hover:border-border\"}`}>\n          <div className=\"flex items-center gap-3\">\n            <div className={`size-4 rounded-full border-4 flex items-center justify-center transition-colors ${computeEnv === \"vm\" ? \"border-primary\" : \"border-input\"}`}></div>\n            <div>\n              <p className=\"text-sm font-medium\">Virtual Machine</p>\n              <p className=\"text-xs text-muted-foreground\">Access a VM configured cluster.</p>\n            </div>\n          </div>\n        </div>\n        <div className=\"pt-4 flex items-center justify-between border-t border-border\">\n          <div>\n            <p className=\"text-sm font-medium\">Number of GPUs</p>\n            <p className=\"text-[10px] text-muted-foreground\">You can add more later.</p>\n          </div>\n          <div className=\"flex items-center border border-border rounded-md\">\n            <button onClick={() => setGpuCount(Math.max(0, gpuCount - 1))} className=\"cursor-pointer px-2 py-1 text-muted-foreground hover:text-foreground transition-colors active:bg-muted rounded-l-md\">-</button>\n            <span className=\"px-2 text-sm text-center w-8 font-mono\">{gpuCount}</span>\n            <button onClick={() => setGpuCount(gpuCount + 1)} className=\"cursor-pointer px-2 py-1 text-muted-foreground hover:text-foreground transition-colors active:bg-muted rounded-r-md\">+</button>\n          </div>\n        </div>\n      </div>\n    </ComponentCard>\n  );\n}",
      "type": "registry:component",
      "target": "components/custom/blocks/ComputeBlock.tsx"
    }
  ],
  "docs": "Named export: ComputeBlock. A self-contained example with hardcoded values and local state — copy and adapt rather than configuring through props. Depends on `ui-base` for ComponentCard.",
  "categories": [
    "data-display",
    "layout"
  ],
  "type": "registry:component"
}