import React, { useState, useEffect } from 'react'; import { CheckCircle2, Circle, Phone, Dumbbell, Moon, Target, TrendingUp, Calendar } from 'lucide-react'; const HabitTracker = () => { const [habits, setHabits] = useState({ gym: Array(7).fill(false), sleep: Array(7).fill(false), focus: Array(7).fill(false), noPhone: Array(7).fill(false) }); const [currentWeek, setCurrentWeek] = useState(0); const [streaks, setStreaks] = useState({ gym: 0, sleep: 0, focus: 0, noPhone: 0 }); const habitConfig = { gym: { name: 'Gym (4x/week)', icon: Dumbbell, color: 'text-blue-600', bgColor: 'bg-blue-50', target: 4, tip: 'Schedule gym sessions at the same times each week' }, sleep: { name: 'Good Sleep Routine', icon: Moon, color: 'text-purple-600', bgColor: 'bg-purple-50', target: 7, tip: 'Create a wind-down routine 1 hour before bed' }, focus: { name: 'Focused Work', icon: Target, color: 'text-green-600', bgColor: 'bg-green-50', target: 5, tip: 'Use 25-minute focused work blocks (Pomodoro)' }, noPhone: { name: 'No Phone Before Bed', icon: Phone, color: 'text-red-600', bgColor: 'bg-red-50', target: 7, tip: 'Charge phone outside bedroom or use Do Not Disturb' } }; const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const toggleHabit = (habitKey, dayIndex) => { setHabits(prev => ({ ...prev, [habitKey]: prev[habitKey].map((completed, index) => index === dayIndex ? !completed : completed ) })); }; const calculateStreak = (habitArray) => { let streak = 0; for (let i = habitArray.length - 1; i >= 0; i--) { if (habitArray[i]) { streak++; } else { break; } } return streak; }; const getWeeklyProgress = (habitKey) => { const completed = habits[habitKey].filter(Boolean).length; const target = habitConfig[habitKey].target; return Math.min((completed / target) * 100, 100); }; const getOverallProgress = () => { const totalProgress = Object.keys(habitConfig).reduce((sum, key) => { return sum + getWeeklyProgress(key); }, 0); return Math.round(totalProgress / Object.keys(habitConfig).length); }; useEffect(() => { const newStreaks = {}; Object.keys(habits).forEach(key => { newStreaks[key] = calculateStreak(habits[key]); }); setStreaks(newStreaks); }, [habits]); return (

Your Habit Journey

Week Progress: {getOverallProgress()}%

{Object.entries(habitConfig).map(([key, config]) => { const Icon = config.icon; const progress = getWeeklyProgress(key); const isOnTarget = habits[key].filter(Boolean).length >= config.target; return (

{config.name}

{streaks[key] > 0 && ( 🔥 {streaks[key]} day streak )}

{habits[key].filter(Boolean).length}/{config.target}

{Math.round(progress)}%

{days.map((day, index) => (

{day}

))}

💡 {config.tip}

); })}

🎯 Focus Tips for Success

Breaking Phone Habits:

• Put phone in another room while sleeping
• Use grayscale mode to reduce appeal
• Set app time limits

Building Consistency:

• Start small - even 15min counts
• Stack habits with existing routines
• Track immediately after completing

); }; export default HabitTracker;