39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import Button from '@/components/ui/Button';
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description?: string;
|
|
action?: {
|
|
label: string;
|
|
onClick: () => void;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
export const EmptyState = ({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
action,
|
|
className = ''
|
|
}: EmptyStateProps) => (
|
|
<div className={`text-center py-12 ${className}`}>
|
|
<div className="max-w-md mx-auto">
|
|
<div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-iron-gray/60 border border-charcoal-outline/50 mb-6">
|
|
<Icon className="w-8 h-8 text-gray-500" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">{title}</h3>
|
|
{description && (
|
|
<p className="text-gray-400 mb-8">{description}</p>
|
|
)}
|
|
{action && (
|
|
<Button variant="primary" onClick={action.onClick} className="mx-auto">
|
|
{action.label}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
); |