1
6import * as React from "react";
7import { clsx } from "clsx";
8
9export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
10
11 icon?: React.ReactNode;
12 title: string;
13 description?: string;
14
15 action?: React.ReactNode;
16}
17
18export function EmptyState({
19 icon,
20 title,
21 description,
22 action,
23 className,
24 ...props
25}: EmptyStateProps) {
26 return (
27 <div
28 className={clsx(
29 "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border",
30 "p-10 text-center",
31 className,
32 )}
33 {...props}
34 >
35 {icon !== undefined && (
36 <div className="mb-1 text-muted-foreground" aria-hidden="true">
37 {icon}
38 </div>
39 )}
40 <h3 className="text-base font-semibold text-foreground">{title}</h3>
41 {description !== undefined && (
42 <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
43 )}
44 {action !== undefined && <div className="mt-3">{action}</div>}
45 </div>
46 );
47}
48