64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { Trophy, Sparkles, LucideIcon } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Button } from '@/ui/Button';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface EmptyStateProps {
|
|
title: string;
|
|
description: string;
|
|
icon?: LucideIcon;
|
|
actionIcon?: LucideIcon;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({
|
|
title,
|
|
description,
|
|
icon = Trophy,
|
|
actionIcon = Sparkles,
|
|
actionLabel,
|
|
onAction,
|
|
children,
|
|
className,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<Card className={className}>
|
|
<Box textAlign="center" py={16}>
|
|
<Box maxWidth="md" mx="auto">
|
|
<Box height={16} width={16} mx="auto" display="flex" center rounded="2xl" backgroundColor="primary-blue" opacity={0.1} border borderColor="primary-blue" mb={6}>
|
|
<Icon icon={icon} size={8} color="text-primary-blue" />
|
|
</Box>
|
|
<Box mb={3}>
|
|
<Heading level={2}>
|
|
{title}
|
|
</Heading>
|
|
</Box>
|
|
<Box mb={8}>
|
|
<Text color="text-gray-400">
|
|
{description}
|
|
</Text>
|
|
</Box>
|
|
{children}
|
|
{actionLabel && onAction && (
|
|
<Button
|
|
variant="primary"
|
|
onClick={onAction}
|
|
icon={<Icon icon={actionIcon} size={4} />}
|
|
className="mx-auto"
|
|
>
|
|
{actionLabel}
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|