1
import type { ReactNode } from "react";
2
 
3
interface EmptyStateProps {
4
  icon: ReactNode;
5
  title: string;
6
  description?: string;
7
  action?: ReactNode;
8
}
9
 
10
export const EmptyState = ({ icon, title, description, action }: EmptyStateProps) => (
11
  <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-6">
12
    <div className="flex items-start gap-4">
13
      <div className="shrink-0 rounded-xl bg-accent-500/10 p-2.5 text-accent-300">{icon}</div>
14
      <div>
15
        <h2 className="font-display text-lg font-semibold text-zinc-100">{title}</h2>
16
        {description ? <p className="mt-2 text-sm text-zinc-500">{description}</p> : null}
17
        {action ? <div className="mt-4">{action}</div> : null}
18
      </div>
19
    </div>
20
  </div>
21
);