import { Inbox } from 'lucide-react'
import type { ReactNode } from 'react'
interface Props {
icon?: ReactNode
title: string
description?: ReactNode
action?: ReactNode
/**
* One of "default" | "muted". `muted` removes the dot-grid texture for
* cases where the empty state sits inside an already-decorated card.
*/
variant?: 'default' | 'muted'
}
/**
* Friendly empty-state card — used everywhere a list/grid would otherwise
* render as a single line of grey text. The default variant uses the same
* dot-grid surface as the dashboard so it reads as "intentionally empty"
* rather than "broken".
*/
export default function EmptyState({
icon,
title,
description,
action,
variant = 'default',
}: Props) {
return (
{icon}
{title}
{description && (
{description}
)}
{action &&
{action}
}
)
}
function EmptyIllustration({ children }: { children?: ReactNode }) {
// Layered "stacked cards" SVG — feels like a deck of slides waiting to
// be filled. Uses currentColor so it adopts the brand tint where set.
return (
)
}