EmptyStateIllustration

import { EmptyStateIllustration } from "@raydenui/ui";

<EmptyStateIllustration variant="no-data" />

// Data states
<EmptyStateIllustration variant="no-data" />
<EmptyStateIllustration variant="no-results" />
<EmptyStateIllustration variant="empty-folder" />
<EmptyStateIllustration variant="empty-inbox" />

<EmptyStateIllustration variant="success" />
<EmptyStateIllustration variant="error" />
<EmptyStateIllustration variant="warning" />

<EmptyStateIllustration variant="no-connection" />
<EmptyStateIllustration variant="offline" />

<EmptyStateIllustration
  variant="no-data"
  primaryColor="#F56630"
  secondaryColor="#FCB59A"
/>

<EmptyStateIllustration variant="no-data" size="sm" /> {/* 120px */}
<EmptyStateIllustration variant="no-data" size="md" /> {/* 200px */}
<EmptyStateIllustration variant="no-data" size="lg" /> {/* 280px */}

<div className="flex flex-col items-center gap-4 p-8">
  <EmptyStateIllustration variant="no-data" size="lg" />
  <h3 className="text-lg font-semibold text-grey-800">No data yet</h3>
  <p className="text-grey-500">Get started by adding your first item</p>
  <Button variant="primary">Add Item</Button>
</div>