1
import type { ReactNode } from "react";
2
 
3
interface EmptyStateProps {
4
  icon: ReactNode;
5
  heading: string;
6
  description?: string;
7
  caption?: string;
8
  children?: ReactNode;
9
}
10
 
11
export function EmptyState({ icon, heading, description, caption, children }: EmptyStateProps) {
12
  return (
13
    <div className="flex flex-col items-center justify-center gap-4 p-8 text-center">
14
      <span className="inline-grid h-14 w-14 place-items-center rounded-full bg-zinc-800/60">{icon}</span>
15
      <div>
16
        {caption ? (
17
          <span className="mb-2 block text-xs font-semibold uppercase tracking-wider text-zinc-500">{caption}</span>
18
        ) : null}
19
        <h2 className="text-lg font-semibold text-zinc-300">{heading}</h2>
20
        {description ? <p className="mt-2 max-w-sm text-sm text-zinc-400">{description}</p> : null}
21
      </div>
22
      {children}
23
    </div>
24
  );
25
}