harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-18 23:02:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

working version 3

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-18 13:22:55 -05:00
parent 1fab739a19
commit 081963cc21
3 changed files with 234 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

171
src/components/Calendar.tsx
View file

@ -19,6 +19,12 @@ export function Calendar({
}: CalendarProps) {
const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const getFirstDayOfMonth = (year: number, month: number) => {
const date = new Date(year, month, 1);
// Convert Sunday (0) to 6 for our Monday-based week
return date.getDay() === 0 ? 6 : date.getDay() - 1;
};
return (
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
<div className="flex items-center justify-between mb-8">
@ -47,69 +53,116 @@ export function Calendar({
{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);
const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date));
{(() => {
const year = currentMonth.getFullYear();
const month = currentMonth.getMonth();
const firstDayOfMonth = getFirstDayOfMonth(year, month);
const daysInMonth = getDaysInMonth(year, month);
const daysInPrevMonth = getDaysInMonth(year, month - 1);
return (
<div
key={date}
className="border dark:border-gray-700 rounded-lg p-3 min-h-[80px] relative group hover:shadow-md transition-shadow duration-200"
>
<span className="text-sm font-medium dark:text-white">{index + 1}</span>
{habits.length > 0 && (
<div className="absolute bottom-3 left-1/2 transform -translate-x-1/2">
<div className="relative">
<div
className={`h-3 w-3 ${
completedHabits.length > 0
? 'bg-green-500 shadow-sm shadow-green-200'
: 'bg-gray-300 dark:bg-gray-600'
} rounded-full transition-colors duration-200`}
/>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 hidden group-hover:block">
<div className="bg-white dark:bg-gray-800 text-sm rounded-lg shadow-lg p-4 border dark:border-gray-700 min-w-[200px]">
{completedHabits.length > 0 && (
<div className="mb-3">
<span className="text-green-500 font-semibold block mb-1">
✓ Completed
</span>
<ul className="space-y-1">
{completedHabits.map(habit => (
<li key={habit.id} className="text-gray-600 dark:text-gray-300">
{habit.name}
</li>
))}
</ul>
</div>
)}
{incompleteHabits.length > 0 && (
<div>
<span className="text-red-500 font-semibold block mb-1">
○ Pending
</span>
<ul className="space-y-1">
{incompleteHabits.map(habit => (
<li key={habit.id} className="text-gray-600 dark:text-gray-300">
{habit.name}
</li>
))}
</ul>
</div>
)}
// Calculate days to show
const days = [];
// Previous month days
for (let i = 0; i < firstDayOfMonth; i++) {
const day = daysInPrevMonth - firstDayOfMonth + i + 1;
const date = new Date(year, month - 1, day).toISOString().split('T')[0];
days.push({
date,
dayNumber: day,
isCurrentMonth: false
});
}
// Current month days
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i).toISOString().split('T')[0];
days.push({
date,
dayNumber: i,
isCurrentMonth: true
});
}
// Next month days to complete the grid
const remainingDays = 42 - days.length; // 6 rows * 7 days
for (let i = 1; i <= remainingDays; i++) {
const date = new Date(year, month + 1, i).toISOString().split('T')[0];
days.push({
date,
dayNumber: i,
isCurrentMonth: false
});
}
return days.map(({ date, dayNumber, isCurrentMonth }) => {
const completedHabits = getCompletedHabitsForDate(date);
const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date));
return (
<div
key={date}
className={`border dark:border-gray-700 rounded-lg p-3 min-h-[80px] relative group hover:shadow-md transition-shadow duration-200 ${
!isCurrentMonth ? 'bg-gray-50 dark:bg-gray-800/50' : ''
}`}
>
<span className={`text-sm font-medium ${
isCurrentMonth
? 'dark:text-white'
: 'text-gray-400 dark:text-gray-500'
}`}>
{dayNumber}
</span>
{habits.length > 0 && (
<div className="absolute bottom-3 left-1/2 transform -translate-x-1/2">
<div className="relative">
<div
className={`h-3 w-3 ${
completedHabits.length > 0
? 'bg-green-500 shadow-sm shadow-green-200'
: 'bg-gray-300 dark:bg-gray-600'
} rounded-full transition-colors duration-200`}
/>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 hidden group-hover:block">
<div className="bg-white dark:bg-gray-800 text-sm rounded-lg shadow-lg p-4 border dark:border-gray-700 min-w-[200px]">
{completedHabits.length > 0 && (
<div className="mb-3">
<span className="text-green-500 font-semibold block mb-1">
✓ Completed
</span>
<ul className="space-y-1">
{completedHabits.map(habit => (
<li key={habit.id} className="text-gray-600 dark:text-gray-300">
{habit.name}
</li>
))}
</ul>
</div>
)}
{incompleteHabits.length > 0 && (
<div>
<span className="text-red-500 font-semibold block mb-1">
○ Pending
</span>
<ul className="space-y-1">
{incompleteHabits.map(habit => (
<li key={habit.id} className="text-gray-600 dark:text-gray-300">
{habit.name}
</li>
))}
</ul>
</div>
)}
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
})}
)}
</div>
);
});
})()}
</div>
</div>
);