{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-states",
  "title": "Error states",
  "description": "Displays error state variants for different HTTP error codes and generic errors.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://blok.sitecore.com/r/theme.json",
    "https://blok.sitecore.com/r/button.json"
  ],
  "files": [
    {
      "path": "src/components/ui/error-states.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nconst errorStatesVariants = cva(\"flex items-center justify-center h-full\", {\n  variants: {\n    variant: {\n      generic: \"\",\n      \"400\": \"\",\n      \"401\": \"\",\n      \"403\": \"\",\n      \"404\": \"\",\n      \"500\": \"\",\n      \"503\": \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"generic\",\n  },\n});\n\ninterface ErrorStatesProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof errorStatesVariants> {\n  title?: string;\n  description?: React.ReactNode;\n  errorCode?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  actions?: React.ReactNode;\n  knowledgeBaseUrl?: string;\n}\n\nconst errorStateConfig = {\n  generic: {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert\",\n    imageAlt: \"alert\",\n    defaultTitle: \"Something went wrong\",\n    defaultDescription: (knowledgeBaseUrl?: string) => (\n      <>\n        (Customizable text) Please try again. If the issue persists, try\n        visiting the{\" \"}\n        <a\n          href={knowledgeBaseUrl || \"#\"}\n          className=\"text-primary hover:underline\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Knowledge Base\n        </a>{\" \"}\n        for assistance.\n      </>\n    ),\n  },\n  \"400\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle\",\n    imageAlt: \"alert\",\n    defaultTitle: \"Bad request\",\n    defaultDescription:\n      \"(Customizable text) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\",\n    defaultErrorCode: \"Error 400\",\n  },\n  \"401\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-stop\",\n    imageAlt: \"stop\",\n    defaultTitle: \"Unauthorized\",\n    defaultDescription:\n      \"(Customizable text) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\",\n    defaultErrorCode: \"Error 401\",\n  },\n  \"403\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-lock\",\n    imageAlt: \"lock\",\n    defaultTitle: \"Forbidden\",\n    defaultDescription:\n      \"(Customizable text) You don't have permission to access this page.\",\n    defaultErrorCode: \"Error 403\",\n  },\n  \"404\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-map-search\",\n    imageAlt: \"map-search\",\n    defaultTitle: \"Page not found\",\n    defaultDescription: \"The page you are looking for cannot be found.\",\n    defaultErrorCode: \"Error 404\",\n  },\n  \"500\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle?\",\n    imageAlt: \"alert\",\n    defaultTitle: \"Internal server error\",\n    defaultDescription: \"(Customizable text) This page isn't working.\",\n    defaultErrorCode: \"Error 500\",\n  },\n  \"503\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-wrench-clock\",\n    imageAlt: \"wrench-clock\",\n    defaultTitle: \"Service unavailable\",\n    defaultDescription:\n      \"(Customizable text) The service you requested is not available at this time.\",\n    defaultErrorCode: \"Error 503\",\n  },\n};\n\nfunction ErrorStates({\n  className,\n  variant = \"generic\",\n  title,\n  description,\n  errorCode,\n  imageSrc,\n  imageAlt,\n  actions,\n  knowledgeBaseUrl,\n  ...props\n}: ErrorStatesProps) {\n  const config = errorStateConfig[variant || \"generic\"];\n  const finalTitle = title || config.defaultTitle;\n  const finalDescription =\n    description ||\n    (typeof config.defaultDescription === \"function\"\n      ? config.defaultDescription(knowledgeBaseUrl)\n      : config.defaultDescription);\n  const finalErrorCode =\n    errorCode ||\n    (\"defaultErrorCode\" in config ? config.defaultErrorCode : undefined);\n  const finalImageSrc = imageSrc || config.imageSrc;\n  const finalImageAlt = imageAlt || config.imageAlt;\n\n  const defaultActions = {\n    generic: (\n      <div className=\"flex flex-col items-center gap-2\">\n        <Button variant=\"link\">Retry</Button>\n        <Button variant=\"link\">Go to homepage</Button>\n      </div>\n    ),\n    \"400\": <Button variant=\"link\">Go to homepage</Button>,\n    \"401\": <Button variant=\"link\">Go to homepage</Button>,\n    \"403\": <Button variant=\"link\">Go to homepage</Button>,\n    \"404\": (\n      <div className=\"flex flex-col items-center gap-2\">\n        <Button variant=\"link\">Go to homepage</Button>\n        <Button variant=\"link\">Visit knowledge base</Button>\n      </div>\n    ),\n    \"500\": <Button variant=\"link\">Go to homepage</Button>,\n    \"503\": <Button variant=\"link\">Go to homepage</Button>,\n  };\n\n  const finalActions = actions || defaultActions[variant || \"generic\"];\n\n  return (\n    <div\n      data-slot=\"error-states\"\n      className={cn(errorStatesVariants({ variant }), className)}\n      {...props}\n    >\n      <div className=\"flex flex-col items-center text-center gap-6 max-w-sm\">\n        <img src={finalImageSrc} alt={finalImageAlt} className=\"w-32 h-32\" />\n        <div className=\"flex flex-col items-center gap-1.5\">\n          <h1 className=\"text-2xl font-semibold\">{finalTitle}</h1>\n          {finalErrorCode && (\n            <p className=\"text-sm text-muted-foreground\">{finalErrorCode}</p>\n          )}\n        </div>\n        <p className=\"text-base\">{finalDescription}</p>\n        {finalActions}\n      </div>\n    </div>\n  );\n}\n\nexport { ErrorStates, errorStatesVariants, type ErrorStatesProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}