EmptyState.tsx raw

   1  import { LucideIcon } from "lucide-react";
   2  import React from "react";
   3  import { LinkButton } from "src/components/ui/custom/link-button";
   4  import { cn } from "src/lib/utils";
   5  
   6  type Variant = "dashed" | "muted" | "none";
   7  
   8  type Props = {
   9    icon: LucideIcon;
  10    title: string;
  11    description: string;
  12    variant?: Variant;
  13  } & (
  14    | { buttonText: string; buttonLink: string }
  15    | { buttonText?: never; buttonLink?: never }
  16  );
  17  
  18  const variantClasses: Record<Variant, string> = {
  19    dashed: "shadow-xs border border-dashed",
  20    muted: "bg-muted",
  21    none: "",
  22  };
  23  
  24  const EmptyState: React.FC<Props> = ({
  25    icon: Icon,
  26    title: message,
  27    description: subMessage,
  28    variant = "muted",
  29    buttonText,
  30    buttonLink,
  31  }) => {
  32    return (
  33      <div
  34        className={cn(
  35          "flex flex-1 items-center justify-center rounded-lg p-8",
  36          variantClasses[variant]
  37        )}
  38      >
  39        <div className="flex flex-col items-center gap-1 text-center max-w-sm">
  40          <Icon className="w-10 h-10 text-muted-foreground" />
  41          <h3 className="mt-4 text-lg font-semibold">{message}</h3>
  42          <p className="text-sm text-muted-foreground">{subMessage}</p>
  43          {buttonText && buttonLink && (
  44            <LinkButton to={buttonLink} className="mt-4">
  45              {buttonText}
  46            </LinkButton>
  47          )}
  48        </div>
  49      </div>
  50    );
  51  };
  52  
  53  export default EmptyState;
  54