Skip to content

Add Empty State Component for Zero Activities #53

@Eshaan-byte

Description

@Eshaan-byte

Description

When users first sign up or have no activities logged, show a friendly empty state component that encourages them to start tracking their carbon footprint.

Task

Create an engaging empty state component that appears when users have no activities recorded.

What You Need to Do

  1. Create EmptyState.tsx in src/components/ui/
  2. Design a friendly illustration using emojis or simple SVG
  3. Add encouraging message for new users
  4. Include a prominent call-to-action button
  5. Make it visually appealing and on-brand

Example Design

┌──────────────────────────────────────┐ │ │ │ 🌱 🌍 🌿 │ │ │ │ Start Your Green Journey! │ │ │ │ No activities tracked yet. │ │ Begin logging your digital │ │ activities to see your carbon │ │ footprint and get personalized │ │ eco-friendly tips! │ │ │ │ [➕ Log Your First Activity] │ │ │ └──────────────────────────────────────┘

Component Props

interface EmptyStateProps {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
  icon?: string;
}
Acceptance Criteria
 Component displays when no activities exist
 Friendly, encouraging message
 Clear call-to-action button
 Centered layout with proper spacing
 Responsive design
 Matches app's eco-friendly theme
 Can be reused for different empty states
Where to Use
Dashboard when no activities logged
Tips panel when no tips available
Goals section when no goals set

Metadata

Metadata

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions