State Components

This directory contains reusable state components for the application:

Components

Loading

Shows a loading spinner with optional message

<Loading message="Loading data..." />

EmptyState

Shows when no data is available

<EmptyState
  icon={PackageOpen}
  title="No Labels Found"
  description="There are no labels matching your search criteria."
  actionLabel="Create Label"
  onAction={() => navigate('/labels/create')}
/>

ErrorState

Shows error states (network, general errors, print failures)

<ErrorState
  type="network"
  onRetry={() => fetchData()}
/>

SuccessState

Shows success confirmation

<SuccessState
  title="Success!"
  description="Your task has been completed."
  actionLabel="Continue"
  onAction={() => navigate('/tasks')}
/>

Usage

All state components are designed to be full-screen overlays that maintain the professional European/American enterprise design style with:

• Large icons in colored backgrounds
• Clear, concise messaging
• Prominent call-to-action buttons
• Consistent spacing and typography