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>
+  );
+}