Error states

1import { Button } from "@/components/ui/button";
2import { cn } from "@/lib/utils";
3import { type VariantProps, cva } from "class-variance-authority";
4import type * as React from "react";
5 
6const errorStatesVariants = cva("flex items-center justify-center h-full", {
7  variants: {
8    variant: {
9      generic: "",
10      "400": "",
11      "401": "",
12      "403": "",
13      "404": "",
14      "500": "",
15      "503": "",
16    },
17  },
18  defaultVariants: {
19    variant: "generic",
20  },
21});
22 
23interface ErrorStatesProps
24  extends React.ComponentProps<"div">,
25    VariantProps<typeof errorStatesVariants> {
26  title?: string;
27  description?: React.ReactNode;
28  errorCode?: string;
29  imageSrc?: string;
30  imageAlt?: string;
31  actions?: React.ReactNode;
32  knowledgeBaseUrl?: string;
33}
34 
35const errorStateConfig = {
36  generic: {
37    imageSrc:
38      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert",
39    imageAlt: "alert",
40    defaultTitle: "Something went wrong",
41    defaultDescription: (knowledgeBaseUrl?: string) => (
42      <>
43        (Customizable text) Please try again. If the issue persists, try
44        visiting the{" "}
45        <a
46          href={knowledgeBaseUrl || "#"}
47          className="text-primary hover:underline"
48          target="_blank"
49          rel="noopener noreferrer"
50        >
51          Knowledge Base
52        </a>{" "}
53        for assistance.
54      </>
55    ),
56  },
57  "400": {
58    imageSrc:
59      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle",
60    imageAlt: "alert",
61    defaultTitle: "Bad request",
62    defaultDescription:
63      "(Customizable text) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
64    defaultErrorCode: "Error 400",
65  },
66  "401": {
67    imageSrc:
68      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-stop",
69    imageAlt: "stop",
70    defaultTitle: "Unauthorized",
71    defaultDescription:
72      "(Customizable text) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
73    defaultErrorCode: "Error 401",
74  },
75  "403": {
76    imageSrc:
77      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-lock",
78    imageAlt: "lock",
79    defaultTitle: "Forbidden",
80    defaultDescription:
81      "(Customizable text) You don't have permission to access this page.",
82    defaultErrorCode: "Error 403",
83  },
84  "404": {
85    imageSrc:
86      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-map-search",
87// … truncated