1
import type { ReactNode } from "react";
2
 
3
type EmptyStateProps = {
4
  icon: ReactNode;
5
  title: string;
6
  detail?: string;
7
  large?: boolean;
8
};
9
 
10
export function EmptyState({ icon, title, detail, large = false }: EmptyStateProps) {
11
  return (
12
    <div
13
      className={`flex flex-col items-center text-center ${large ? "gap-3 py-10" : "gap-2 py-6"}`}
14
    >
15
      <span
16
        className={`inline-grid place-items-center rounded-full bg-zinc-100 dark:bg-zinc-800/60 ${large ? "h-14 w-14" : "h-10 w-10"}`}
17
      >
18
        {icon}
19
      </span>
20
      <p className="mb-0 text-sm text-zinc-600 dark:text-zinc-400">{title}</p>
21
      {detail ? <p className="mb-0 text-xs text-zinc-500">{detail}</p> : null}
22
    </div>
23
  );
24
}