53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Trophy, Sparkles, Search } from 'lucide-react';
|
|
import Heading from '@/components/ui/Heading';
|
|
import Button from '@/components/ui/Button';
|
|
import Card from '@/components/ui/Card';
|
|
|
|
interface EmptyStateProps {
|
|
title: string;
|
|
description: string;
|
|
icon?: React.ElementType;
|
|
actionIcon?: React.ElementType;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({
|
|
title,
|
|
description,
|
|
icon: Icon = Trophy,
|
|
actionIcon: ActionIcon = Sparkles,
|
|
actionLabel,
|
|
onAction,
|
|
children,
|
|
className,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<Card className={`text-center py-16 ${className || ''}`}>
|
|
<div className="max-w-md mx-auto">
|
|
<div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20 mb-6">
|
|
<Icon className="w-8 h-8 text-primary-blue" />
|
|
</div>
|
|
<Heading level={2} className="text-2xl mb-3">
|
|
{title}
|
|
</Heading>
|
|
<p className="text-gray-400 mb-8">
|
|
{description}
|
|
</p>
|
|
{children}
|
|
{actionLabel && onAction && (
|
|
<Button
|
|
variant="primary"
|
|
onClick={onAction}
|
|
className="flex items-center gap-2 mx-auto"
|
|
>
|
|
<ActionIcon className="w-4 h-4" />
|
|
{actionLabel}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |