frigate/web/src/components/card/EmptyCard.tsx

import React from "react";
import { Button } from "../ui/button";
import Heading from "../ui/heading";
import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";

type EmptyCardProps = {
  className?: string;
  icon: React.ReactNode;
  title: string;
  titleHeading?: boolean;
  description?: string;
  buttonText?: string;
  link?: string;
  onClick?: () => void;
};
export function EmptyCard({
  className,
  icon,
  title,
  titleHeading = true,
  description,
  buttonText,
  link,
  onClick,
}: EmptyCardProps) {
  let TitleComponent;

  if (titleHeading) {
    TitleComponent = <Heading as="h4">{title}</Heading>;
  } else {
    TitleComponent = <div>{title}</div>;
  }

  return (
    <div className={cn("flex flex-col items-center gap-2", className)}>
      {icon}
      {TitleComponent}
      {description && (
        <div className="mb-3 text-center text-secondary-foreground">
          {description}
        </div>
      )}
      {buttonText?.length &&
        (onClick ? (
          <Button size="sm" variant="select" onClick={onClick}>
            {buttonText}
          </Button>
        ) : (
          <Button size="sm" variant="select">
            <Link to={link ?? "#"}>{buttonText}</Link>
          </Button>
        ))}
    </div>
  );
}