Удобный трекер привычек

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [habits, setHabits] = useState([
    { id: 1, name: 'Drink Water', completed: false },
    { id: 2, name: 'Exercise', completed: false },
    { id: 3, name: 'Read', completed: false }
  ]);

  const toggleHabit = (id) => {
    setHabits(habits.map(habit => 
      habit.id === id ? { ...habit, completed: !habit.completed } : habit
    ));
  };

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Habit Tracker</h1>
      </header>
      <main className="p-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {habits.map(habit => (
            <div key={habit.id} className="p-4 border rounded-lg shadow-md">
              <h2 className="text-xl font-semibold">{habit.name}</h2>
              <button
                onClick={() => toggleHabit(habit.id)}
                className={`mt-2 px-4 py-2 rounded ${habit.completed ? 'bg-green-500' : 'bg-red-500'} text-white`}
              >
                {habit.completed ? 'Completed' : 'Mark as Complete'}
              </button>
            </div>
          ))}
        </div>
      </main>
      <footer className="bg-gray-800 text-white p-4 mt-4">
        <p>&copy; 2025 Habit Tracker. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;