harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-15 08:03:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed calendar

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-17 20:51:10 -05:00
parent de1634d659
commit a1c0aeb8e7
3 changed files with 59 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.gitignore vendored
View file

@ -22,3 +22,10 @@ dist-ssr
*.njsproj
*.sln
*.sw?
# Database files
*.db
*.db-journal
*.sqlite
*.sqlite3
*.sqlite-journal

BIN
habits.db
View file

Binary file not shown.

66
src/components/Calendar.tsx
View file

@ -20,30 +20,32 @@ export function Calendar({
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">
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
<div className="flex items-center justify-between mb-8">
<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"
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors duration-200"
>
<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"
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors duration-200"
>
<ChevronRight className="h-5 w-5 dark:text-white" />
</button>
</div>
</div>
<div className="grid grid-cols-7 gap-2">
<div className="grid grid-cols-7 gap-4">
{daysOfWeek.map(day => (
<div key={day} className="text-center font-bold dark:text-white">{day}</div>
<div key={day} className="text-center font-semibold text-gray-600 dark:text-gray-300 mb-2">
{day}
</div>
))}
{Array.from({ length: getDaysInMonth(currentMonth.getFullYear(), currentMonth.getMonth()) }).map((_, index) => {
const date = new Date(
@ -52,19 +54,55 @@ export function Calendar({
index + 1
).toISOString().split('T')[0];
const completedHabits = getCompletedHabitsForDate(date);
const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date));
return (
<div
key={date}
className="border dark:border-gray-700 p-2 min-h-[60px] relative"
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 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(', ')}
<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>
)}
</div>
</div>
</div>
</div>