{
  "name": "ui-components-errordisplay",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui-components/ErrorDisplay.tsx",
      "type": "registry:component",
      "content": "\"use client\";\nimport {\n\tExclamationTriangleIcon,\n\tInfoCircledIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n\tBACKEND_ERRORS,\n\ttype BigBlocksError,\n\tErrorType,\n} from \"../../lib/types.js\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport interface ErrorDisplayProps {\n\terror?: string | BigBlocksError;\n\tclassName?: string;\n\tsize?: \"sm\" | \"default\" | \"lg\";\n}\n\nfunction isBackendSetupError(error: string | BigBlocksError): boolean {\n\tif (typeof error === \"object\" && error.type === ErrorType.BACKEND_SETUP) {\n\t\treturn true;\n\t}\n\n\tif (typeof error === \"string\") {\n\t\t// Check against known backend error messages from constants\n\t\treturn Object.values(BACKEND_ERRORS).some((message) => message === error);\n\t}\n\n\treturn false;\n}\n\nfunction getErrorMessage(error: string | BigBlocksError): string {\n\treturn typeof error === \"object\" ? error.message : error;\n}\n\nexport function ErrorDisplay({\n\terror,\n\tclassName = \"\",\n\tsize = \"default\",\n}: ErrorDisplayProps) {\n\tif (!error) return null;\n\n\tconst isBackendError = isBackendSetupError(error);\n\tconst errorMessage = getErrorMessage(error);\n\n\tconst sizeClasses = {\n\t\tsm: \"p-2 text-xs\",\n\t\tdefault: \"p-3 text-sm\",\n\t\tlg: \"p-4 text-base\",\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-start gap-2 rounded-md border\",\n\t\t\t\tisBackendError\n\t\t\t\t\t? \"border-amber-200 bg-amber-50 text-amber-900\"\n\t\t\t\t\t: \"border-destructive/50 bg-destructive/10 text-destructive-foreground\",\n\t\t\t\tsizeClasses[size],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{isBackendError ? (\n\t\t\t\t<InfoCircledIcon className=\"h-4 w-4 shrink-0 mt-0.5\" />\n\t\t\t) : (\n\t\t\t\t<ExclamationTriangleIcon className=\"h-4 w-4 shrink-0 mt-0.5\" />\n\t\t\t)}\n\t\t\t<div className=\"flex-1\">\n\t\t\t\t{isBackendError && (\n\t\t\t\t\t<div className=\"font-bold mb-1\">⚠️ Backend Setup Required</div>\n\t\t\t\t)}\n\t\t\t\t{errorMessage}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/errordisplay.tsx"
    }
  ]
}