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

added some functionality to the calendar page

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-20 15:13:18 -05:00
parent 6b6cba21e5
commit 0ab0745a2c
3 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
habits.db
View file

Binary file not shown.

6
src/App.tsx
View file

@ -83,7 +83,10 @@ function HabitTrackerContent() {
<div className={`rounded-lg shadow p-6 ${theme.cardBackground}`}> <div className={`rounded-lg shadow p-6 ${theme.cardBackground}`}>
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold dark:text-white">Weekly Progress</h2> <div>
<h2 className="text-2xl font-bold dark:text-white">Your Habits</h2>
<p className="text-sm text-gray-400 dark:text-gray-300 mt-1">Track your weekly progress</p>
</div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <button
onClick={goToCurrentWeek} onClick={goToCurrentWeek}
@ -117,6 +120,7 @@ function HabitTrackerContent() {
onDeleteHabit={deleteHabit} onDeleteHabit={deleteHabit}
onUpdateStreak={updateStreak} onUpdateStreak={updateStreak}
/> />
<p className="text-sm text-gray-500 dark:text-gray-300 mt-4">Keep up the good work! Consistency is key.</p>
</div> </div>
</div> </div>
); );

10
src/components/Calendar.tsx
View file

@ -128,14 +128,18 @@ export const Calendar: React.FC<CalendarProps> = ({
<div className="group relative inline-block"> <div className="group relative inline-block">
<div <div
className={` className={`
h-4 w-4 rounded-full cursor-pointer h-5 px-2 rounded-full cursor-pointer
transition-colors duration-200 transition-colors duration-200 flex items-center justify-center
${completedHabits.length > 0 ${completedHabits.length > 0
? 'bg-[#2ecc71] dark:bg-[#2ecc71] shadow-sm shadow-[#2ecc7150]' ? 'bg-[#2ecc71] dark:bg-[#2ecc71] shadow-sm shadow-[#2ecc7150]'
: `bg-[#e9e9e8] dark:bg-[#393939]` : `bg-[#e9e9e8] dark:bg-[#393939]`
} }
`} `}
/> >
<span className="text-[8px] font-medium text-black/70 dark:text-white/70">
{completedHabits.length}/{habits.length}
</span>
</div>
<div <div
className={` className={`
absolute bottom-full left-1/2 -translate-x-1/2 mb-2 absolute bottom-full left-1/2 -translate-x-1/2 mb-2