import { cva, type VariantProps } from "class-variance-authority"; import type * as React from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Image } from "@/components/registry/primitives/editables/image"; import { cn } from "@/lib/registry/cn"; const emptyStatesVariants = cva("flex items-center justify-center h-full", { variants: { variant: { "no-search-results": "", "nothing-created": "", error: "", }, }, defaultVariants: { variant: "no-search-results", }, }); interface EmptyStatesProps extends React.ComponentProps<"div">, VariantProps { title?: string; description?: string; imageSrc?: string; imageAlt?: string; actions?: React.ReactNode; } const emptyStateConfig = { "no-search-results": { imageSrc: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-magnify-close-neutral", imageAlt: "magnifier icon", defaultTitle: "No search results", defaultDescription: "Try a different search query.", }, "nothing-created": { imageSrc: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-cactus-neutral", imageAlt: "desert icon", defaultTitle: "No widgets yet", defaultDescription: undefined, }, error: { imageSrc: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle", imageAlt: "alert icon", defaultTitle: "Something went wrong", defaultDescription: "Description of the error.", }, }; function EmptyStates({ className, variant = "no-search-results", title, description, imageSrc, imageAlt, actions, ...props }: EmptyStatesProps) { const config = emptyStateConfig[variant || "no-search-results"]; const finalTitle = title || config.defaultTitle; const finalDescription = description || config.defaultDescription; const finalImageSrc = imageSrc || config.imageSrc; const finalImageAlt = imageAlt || config.imageAlt; const defaultActions = { "no-search-results": , "nothing-created": , error: , }; const finalActions = actions || defaultActions[variant || "no-search-results"]; return (

{finalTitle}

{finalDescription && (

{finalDescription}

)}

{finalActions}

); } export { EmptyStates, type EmptyStatesProps, emptyStatesVariants };

Empty states

Showcase

Empty states