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

removed week scrolling

Browse source
This commit is contained in:
Harivansh Rathi 2024-12-05 12:21:58 -05:00
parent f419197d73
commit 149b02b4da
1 changed files with 24 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/App.tsx
View file

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, Sun, Moon, Plus, Circle, User } from 'lucide-react'; import { Plus, Circle, User } from 'lucide-react';
import { HabitList } from './components/HabitList'; import { HabitList } from './components/HabitList';
import { Calendar } from './components/Calendar'; import { Calendar } from './components/Calendar';
import { Sidebar } from './components/Sidebar'; import { Sidebar } from './components/Sidebar';
@ -16,29 +16,28 @@ import { PreferencesProvider, usePreferences } from './contexts/PreferencesConte
const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
function HabitTrackerContent() { function HabitTrackerContent() {
const { theme, isDark, toggleDarkMode, defaultView, habitSort } = useThemeContext(); const { theme, habitSort } = useThemeContext();
const [newHabit, setNewHabit] = useState(''); const [newHabit, setNewHabit] = useState('');
const [activeView, setActiveView] = useState<'habits' | 'calendar' | 'settings'>(defaultView); const [activeView, setActiveView] = useState<'habits' | 'calendar' | 'settings'>('habits');
const [currentMonth, setCurrentMonth] = useState(new Date()); const [currentMonth, setCurrentMonth] = useState(new Date());
const { user, loading, signOut } = useAuth(); const { user, loading } = useAuth();
const [authView, setAuthView] = useState<'login' | 'signup'>('login'); const [authView, setAuthView] = useState<'login' | 'signup'>('login');
const { preferences } = usePreferences(); const { preferences } = usePreferences();
const { const {
habits, habits,
fetchHabits, fetchHabits,
addHabit: addHabitApi, addHabit: addHabitApi,
toggleHabit, toggleHabit,
updateHabit, updateHabit,
deleteHabit, deleteHabit,
error error
} = useHabits(); } = useHabits();
const { const {
currentWeek, currentWeek,
setCurrentWeek, setCurrentWeek,
getCurrentWeekDates, getCurrentWeekDates
changeWeek
} = useWeek(); } = useWeek();
useEffect(() => { useEffect(() => {
@ -112,7 +111,7 @@ function HabitTrackerContent() {
</div> </div>
<div className={` <div className={`
mb-8 p-4 md:p-6 mb-8 p-4 md:p-6
rounded-lg shadow-md rounded-lg shadow-md
${theme.cardBackground} ${theme.cardBackground}
${theme.border} ${theme.border}
@ -122,8 +121,8 @@ function HabitTrackerContent() {
<form onSubmit={handleAddHabit} className="space-y-4 md:space-y-0 md:flex md:items-center md:gap-4"> <form onSubmit={handleAddHabit} className="space-y-4 md:space-y-0 md:flex md:items-center md:gap-4">
<div className="flex-1 relative"> <div className="flex-1 relative">
<Plus className={` <Plus className={`
absolute left-4 top-1/2 transform -translate-y-1/2 absolute left-4 top-1/2 transform -translate-y-1/2
h-5 w-5 h-5 w-5
${theme.text} opacity-50 ${theme.text} opacity-50
`} /> `} />
<input <input
@ -132,7 +131,7 @@ function HabitTrackerContent() {
onChange={(e) => setNewHabit(e.target.value)} onChange={(e) => setNewHabit(e.target.value)}
placeholder="Add a new habit" placeholder="Add a new habit"
className={` className={`
w-full px-12 py-3 w-full px-12 py-3
rounded-lg rounded-lg
transition-all duration-200 transition-all duration-200
${theme.input} ${theme.input}
@ -146,11 +145,11 @@ function HabitTrackerContent() {
disabled={!newHabit.trim()} disabled={!newHabit.trim()}
className={` className={`
w-full md:w-auto w-full md:w-auto
px-6 py-3 px-6 py-3
rounded-lg rounded-lg
transition-all duration-200 transition-all duration-200
flex items-center justify-center gap-2 flex items-center justify-center gap-2
${theme.button.primary} ${theme.button.primary}
disabled:opacity-50 disabled:opacity-50
${newHabit.trim() ? 'hover:translate-x-1' : ''} ${newHabit.trim() ? 'hover:translate-x-1' : ''}
`} `}
@ -168,24 +167,12 @@ function HabitTrackerContent() {
<p className={`text-sm ${theme.mutedText}`}>Track your weekly progress</p> <p className={`text-sm ${theme.mutedText}`}>Track your weekly progress</p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<button
onClick={() => changeWeek('prev')}
className={`p-2 rounded-lg ${theme.button.icon}`}
>
<ChevronLeft className="h-5 w-5" />
</button>
<button <button
onClick={goToCurrentWeek} onClick={goToCurrentWeek}
className={`px-4 py-2 rounded-lg ${theme.button.secondary}`} className={`px-4 py-2 rounded-lg ${theme.button.secondary}`}
> >
Today Today
</button> </button>
<button
onClick={() => changeWeek('next')}
className={`p-2 rounded-lg ${theme.button.icon}`}
>
<ChevronRight className="h-5 w-5" />
</button>
</div> </div>
</div> </div>
</div> </div>
@ -290,4 +277,4 @@ export default function HabitTracker() {
</PreferencesProvider> </PreferencesProvider>
</AuthProvider> </AuthProvider>
); );
} }