-
Notifications
You must be signed in to change notification settings - Fork 33
Open
Labels
HacktoberfestHacktoberfest 2025 acceptedHacktoberfest 2025 acceptedHactoberfest-acceptedgood first issueGood for newcomersGood for newcomers
Description
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.tsxinsrc/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 setMetadata
Metadata
Assignees
Labels
HacktoberfestHacktoberfest 2025 acceptedHacktoberfest 2025 acceptedHactoberfest-acceptedgood first issueGood for newcomersGood for newcomers