first commit

src/components/Calendar.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Habit } from '../types';
+
+interface CalendarProps {
+  currentMonth: Date;
+  habits: Habit[];
+  onChangeMonth: (direction: 'prev' | 'next') => void;
+  getDaysInMonth: (year: number, month: number) => number;
+  getCompletedHabitsForDate: (date: string) => Habit[];
+}
+
+export function Calendar({
+  currentMonth,
+  habits,
+  onChangeMonth,
+  getDaysInMonth,
+  getCompletedHabitsForDate
+}: CalendarProps) {
+  const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-2xl font-bold dark:text-white">
+          {currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}
+        </h2>
+        <div className="flex space-x-2">
+          <button
+            onClick={() => onChangeMonth('prev')}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+          >
+            <ChevronLeft className="h-5 w-5 dark:text-white" />
+          </button>
+          <button
+            onClick={() => onChangeMonth('next')}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+          >
+            <ChevronRight className="h-5 w-5 dark:text-white" />
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-7 gap-2">
+        {daysOfWeek.map(day => (
+          <div key={day} className="text-center font-bold dark:text-white">{day}</div>
+        ))}
+        {Array.from({ length: getDaysInMonth(currentMonth.getFullYear(), currentMonth.getMonth()) }).map((_, index) => {
+          const date = new Date(
+            currentMonth.getFullYear(),
+            currentMonth.getMonth(),
+            index + 1
+          ).toISOString().split('T')[0];
+          const completedHabits = getCompletedHabitsForDate(date);
+          
+          return (
+            <div
+              key={date}
+              className="border dark:border-gray-700 p-2 min-h-[60px] relative"
+            >
+              <span className="text-sm dark:text-white">{index + 1}</span>
+              {completedHabits.length > 0 && (
+                <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2">
+                  <div className="group relative">
+                    <div className="h-2 w-2 bg-green-500 rounded-full"></div>
+                    <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-black text-white text-xs rounded p-2 whitespace-nowrap">
+                      {completedHabits.map(habit => habit.name).join(', ')}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/HabitList.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Trash2 } from 'lucide-react';
+import { Habit } from '../types';
+
+interface HabitListProps {
+  habits: Habit[];
+  currentWeek: string[];
+  daysOfWeek: string[];
+  onToggleHabit: (id: number, date: string) => void;
+  onUpdateHabit: (id: number, name: string) => void;
+  onDeleteHabit: (id: number) => void;
+  getStreakForHabit: (habit: Habit) => number;
+}
+
+export function HabitList({
+  habits,
+  currentWeek,
+  daysOfWeek,
+  onToggleHabit,
+  onUpdateHabit,
+  onDeleteHabit,
+  getStreakForHabit
+}: HabitListProps) {
+  return (
+    <table className="w-full">
+      <thead>
+        <tr>
+          <th className="px-4 py-2 text-left dark:text-white">Habit</th>
+          {daysOfWeek.map((day, index) => (
+            <th key={day} className="px-4 py-2 text-center dark:text-white">
+              {day}
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                {new Date(currentWeek[index]).getDate()}
+              </div>
+            </th>
+          ))}
+          <th className="px-4 py-2 text-center dark:text-white">Streak</th>
+          <th className="px-4 py-2 text-center dark:text-white">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {habits.map((habit) => (
+          <tr key={habit.id} className="border-t dark:border-gray-700">
+            <td className="px-4 py-2 dark:text-white">
+              <input
+                type="text"
+                value={habit.name}
+                onChange={(e) => onUpdateHabit(habit.id, e.target.value)}
+                className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2"
+              />
+            </td>
+            {currentWeek.map((date) => (
+              <td key={date} className="px-4 py-2 text-center">
+                <input
+                  type="checkbox"
+                  checked={habit.completedDates.includes(date)}
+                  onChange={() => onToggleHabit(habit.id, date)}
+                  className="w-4 h-4 rounded border-gray-300 dark:border-gray-600"
+                />
+              </td>
+            ))}
+            <td className="px-4 py-2 text-center dark:text-white">
+              {getStreakForHabit(habit)}
+            </td>
+            <td className="px-4 py-2 text-center">
+              <button
+                onClick={() => onDeleteHabit(habit.id)}
+                className="p-2 text-red-500 hover:bg-red-100 dark:hover:bg-red-900 rounded-full"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}