import { Empty } from "@/components/ui/empty";

import { Button } from "@/components/ui/button";
import { Empty } from "@/components/ui/empty";
import { FoldersIcon } from "@/components/ui/folders";

export function Example() {
  return (
    <Empty
      icon={FoldersIcon}
      title="No projects yet"
      description="Create your first project to start collecting assets and briefs."
      action={<Button>New project</Button>}
    />
  );
}

Empty                       (single component — pass content as props)
├── variant="default | outline"
├── size="sm | lg"                   (sm = default, compact chip + tighter spacing; lg = full-page hero)
├── icon={LucideAnimatedIcon}        (renders FeaturedIconAnimated above the title)
├── inky | inky="lost | celebrate | fine | …"  (draws Inky instead of the icon; plain, or with that face)
├── illustration={OpenDoorsIcon}     (draws a static scene, e.g. from squad-icons, instead of the icon)
├── illustrationSize={120}           (illustration width; defaults 160 sm / 208 lg)
├── iconColor="brand | success | destructive | muted | …"
├── iconVariant="flat | gradient"       (default "flat"; "gradient" = brand-tinted card chip)
├── iconSize="sm | md | lg | xl | 2xl"   (default "xl"; "2xl" for hero states)
├── iconAutoPlay                    (play stroke-draw on mount + replay on hover)
├── title=""                        (renders as SectionHeader)
├── description=""
├── titleSize="xs | sm | md | lg | xl"  (default "lg" — text-xl/2xl)
├── titleFont="sans | heading"    (default "sans" Inter; "heading" = Albra display)
└── action={<>buttons</>}           (action row beneath the description)

Need a custom layout (non-animated icon, multi-region body)? The slot
exports — EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription,
EmptyContent — are still exported as the escape hatch.