Empty 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 emptyStatesVariants = cva("flex items-center justify-center h-full", {
7  variants: {
8    variant: {
9      "no-search-results": "",
10      "nothing-created": "",
11      error: "",
12    },
13  },
14  defaultVariants: {
15    variant: "no-search-results",
16  },
17});
18 
19interface EmptyStatesProps
20  extends React.ComponentProps<"div">,
21    VariantProps<typeof emptyStatesVariants> {
22  title?: string;
23  description?: string;
24  imageSrc?: string;
25  imageAlt?: string;
26  actions?: React.ReactNode;
27}
28 
29const emptyStateConfig = {
30  "no-search-results": {
31    imageSrc:
32      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-magnify-close-neutral",
33    imageAlt: "magnifier icon",
34    defaultTitle: "No search results",
35    defaultDescription: "Try a different search query.",
36  },
37  "nothing-created": {
38    imageSrc:
39      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-cactus-neutral",
40    imageAlt: "desert icon",
41    defaultTitle: "No widgets yet",
42    defaultDescription: undefined,
43  },
44  error: {
45    imageSrc:
46      "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle",
47    imageAlt: "alert icon",
48    defaultTitle: "Something went wrong",
49    defaultDescription: "Description of the error.",
50  },
51};
52 
53function EmptyStates({
54  className,
55  variant = "no-search-results",
56  title,
57  description,
58  imageSrc,
59  imageAlt,
60  actions,
61  ...props
62}: EmptyStatesProps) {
63  const config = emptyStateConfig[variant || "no-search-results"];
64  const finalTitle = title || config.defaultTitle;
65  const finalDescription = description || config.defaultDescription;
66  const finalImageSrc = imageSrc || config.imageSrc;
67  const finalImageAlt = imageAlt || config.imageAlt;
68 
69  const defaultActions = {
70    "no-search-results": <Button variant="link">Reset search</Button>,
71    "nothing-created": <Button variant="default">Create widget</Button>,
72    error: <Button variant="link">Try again</Button>,
73  };
74 
75  const finalActions =
76    actions || defaultActions[variant || "no-search-results"];
77 
78  return (
79    <div
80      data-slot="empty-states"
81      className={cn(emptyStatesVariants({ variant }), className)}
82      {...props}
83    >
84      <div className="flex flex-col items-center text-center gap-4 max-w-sm">
85// … truncated