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
- Create
EmptyState.tsx in src/components/ui/
- Design a friendly illustration using emojis or simple SVG
- Add encouraging message for new users
- Include a prominent call-to-action button
- 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
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
EmptyState.tsxinsrc/components/ui/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