54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface EmptyStateProps {
|
|
icon?: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
action?: {
|
|
label: string;
|
|
onClick: () => void;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({
|
|
icon,
|
|
title,
|
|
description,
|
|
action,
|
|
className = '',
|
|
}: EmptyStateProps): ReactNode {
|
|
return (
|
|
<div
|
|
className={`flex flex-col items-center justify-center min-h-[300px] p-8 text-center ${className}`}
|
|
>
|
|
{icon && (
|
|
<div
|
|
className="w-16 h-16 rounded-full flex items-center justify-center mb-4"
|
|
style={{ backgroundColor: 'var(--color-muted, #f3f4f6)' }}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<h3
|
|
className="text-lg font-medium mb-2"
|
|
style={{ color: 'var(--color-foreground, #111827)' }}
|
|
>
|
|
{title}
|
|
</h3>
|
|
<p className="max-w-sm mb-6" style={{ color: 'var(--color-muted-foreground, #6b7280)' }}>
|
|
{description}
|
|
</p>
|
|
{action && (
|
|
<button
|
|
onClick={action.onClick}
|
|
className="px-4 py-2 rounded-lg transition-colors text-white"
|
|
style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
|
|
>
|
|
{action.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|