33 lines
778 B
TypeScript
33 lines
778 B
TypeScript
import { Stack, Text, ThemeIcon, Title } from "@mantine/core";
|
|
import { ReactNode } from "react";
|
|
|
|
interface EmptyStateProps {
|
|
icon: ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
action?: ReactNode;
|
|
}
|
|
|
|
const EmptyState = ({ icon, title, description, action }: EmptyStateProps) => {
|
|
return (
|
|
<Stack align="center" gap="md" py="xl">
|
|
<ThemeIcon size="xl" variant="light" radius="md">
|
|
{icon}
|
|
</ThemeIcon>
|
|
<Stack align="center" gap={4}>
|
|
<Title order={3} c="dimmed" ta="center">
|
|
{title}
|
|
</Title>
|
|
{description && (
|
|
<Text size="sm" c="dimmed" ta="center" maw={280}>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
{action}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default EmptyState;
|