COMPONENT: Empty State Component

[nayan458]

Task: Empty State Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface EmptyStateProps {
  icon?:        ReactNode;    // illustration or emoji
  title:        string;
  description?: string;
  action?:      {
    label:   string;
    onClick: () => void;
  };
  className?:   string;
}

Variants / States

State	Description	Used in
Queue empty	"Queue is clear" + checkmark	ModerationQueue with no reports
Filter empty	"No reports match this filter" + clear filter CTA	Filtered queue with 0 results
User list empty	"No users found"	UserManagement
Analytics no data	"Not enough data yet"	Analytics charts with no history

Acceptance Criteria

• action button renders only when provided — uses shared Button component
• Vertically centered in its parent container
• Icon slot accepts any ReactNode — emoji, SVG, Lucide icon all work
• description is optional — layout doesn't break when absent
• Zero hardcoded hex values
• Storybook stories: with action, without action, without description