34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
interface EmptyStateProps {
|
|
icon: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
}
|
|
|
|
export default function EmptyState({ icon, title, description, actionLabel, onAction }: EmptyStateProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 text-center p-8">
|
|
<div className="w-16 h-16 bg-zinc-50 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-lg font-medium text-zinc-900 dark:text-white mb-1">
|
|
{title}
|
|
</h3>
|
|
<p className="text-zinc-500 dark:text-zinc-400 max-w-sm mx-auto">
|
|
{description}
|
|
</p>
|
|
{actionLabel && onAction && (
|
|
<button
|
|
onClick={onAction}
|
|
className="mt-4 text-sm text-[var(--brand-color)] hover:underline font-medium"
|
|
>
|
|
{actionLabel}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|