40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
}
|
|
|
|
export default function EmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center text-center p-8 min-h-[400px] max-w-md mx-auto">
|
|
<div className="p-4 bg-slate-100 rounded-full mb-4">
|
|
<Icon className="w-12 h-12 text-slate-400" />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-slate-900 mb-2">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-slate-500 mb-6">
|
|
{description}
|
|
</p>
|
|
{actionLabel && onAction && (
|
|
<button
|
|
onClick={onAction}
|
|
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 transition-colors"
|
|
>
|
|
{actionLabel}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
} |