diff --git a/habits.db b/habits.db index 4ce22e1..0a8f677 100644 Binary files a/habits.db and b/habits.db differ diff --git a/src/App.tsx b/src/App.tsx index 519f628..18bca0f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,35 @@ import React, { useState, useEffect } from 'react'; -import { Plus, CalendarIcon, SettingsIcon, Moon, Sun, ChevronLeft, ChevronRight } from 'lucide-react'; +import { ChevronLeft, ChevronRight, Sun, Moon } from 'lucide-react'; import { HabitList } from './components/HabitList'; import { Calendar } from './components/Calendar'; -import { Habit } from './types'; +import { Sidebar } from './components/Sidebar'; +import { useHabits } from './hooks/useHabits'; +import { useWeek } from './hooks/useWeek'; +import { ThemeProvider, useThemeContext } from './contexts/ThemeContext'; -export default function HabitTracker() { - const [habits, setHabits] = useState([]); +function HabitTrackerContent() { + const { theme, isDark, toggleDarkMode } = useThemeContext(); const [newHabit, setNewHabit] = useState(''); - const [currentWeek, setCurrentWeek] = useState([]); const [activeView, setActiveView] = useState<'habits' | 'calendar' | 'settings'>('habits'); - const [darkMode, setDarkMode] = useState(() => localStorage.getItem('darkMode') === 'true'); const [currentMonth, setCurrentMonth] = useState(new Date()); + const { + habits, + fetchHabits, + addHabit: addHabitApi, + toggleHabit, + updateHabit, + deleteHabit, + updateStreak + } = useHabits(); + + const { + currentWeek, + setCurrentWeek, + getCurrentWeekDates, + changeWeek + } = useWeek(); + const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; useEffect(() => { @@ -19,104 +37,16 @@ export default function HabitTracker() { setCurrentWeek(getCurrentWeekDates()); }, []); - useEffect(() => { - if (darkMode) { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); - } - localStorage.setItem('darkMode', darkMode.toString()); - }, [darkMode]); - - const fetchHabits = async () => { - try { - const response = await fetch('http://localhost:5000/api/habits'); - const data = await response.json(); - setHabits(data); - } catch (error) { - console.error('Error fetching habits:', error); - setHabits([]); // Set empty array on error - } - }; - - const addHabit = async (e: React.FormEvent) => { + const handleAddHabit = async (e: React.FormEvent) => { e.preventDefault(); if (newHabit.trim()) { - try { - const response = await fetch('http://localhost:5000/api/habits', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ name: newHabit }), - }); - if (response.ok) { - setNewHabit(''); - fetchHabits(); - } - } catch (error) { - console.error('Error adding habit:', error); + const success = await addHabitApi(newHabit); + if (success) { + setNewHabit(''); } } }; - const toggleHabit = async (id: number, date: string) => { - try { - await fetch(`http://localhost:5000/api/habits/${id}/toggle`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ date }), - }); - fetchHabits(); - } catch (error) { - console.error('Error toggling habit:', error); - } - }; - - const updateHabit = async (id: number, name: string) => { - try { - await fetch(`http://localhost:5000/api/habits/${id}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ name }), - }); - fetchHabits(); - } catch (error) { - console.error('Error updating habit:', error); - } - }; - - const deleteHabit = async (id: number) => { - try { - await fetch(`http://localhost:5000/api/habits/${id}`, { - method: 'DELETE', - }); - fetchHabits(); - } catch (error) { - console.error('Error deleting habit:', error); - } - }; - - const getCurrentWeekDates = () => { - const now = new Date(); - const dayOfWeek = now.getDay(); - const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); - const monday = new Date(now.setDate(diff)); - return Array.from({ length: 7 }, (_, i) => { - const date = new Date(monday); - date.setDate(monday.getDate() + i); - return date.toISOString().split('T')[0]; - }); - }; - - const changeWeek = (direction: 'prev' | 'next') => { - const firstDay = new Date(currentWeek[0]); - const newFirstDay = new Date(firstDay.setDate(firstDay.getDate() + (direction === 'prev' ? -7 : 7))); - setCurrentWeek(Array.from({ length: 7 }, (_, i) => { - const date = new Date(newFirstDay); - date.setDate(newFirstDay.getDate() + i); - return date.toISOString().split('T')[0]; - })); - }; - const changeMonth = (direction: 'prev' | 'next') => { setCurrentMonth(prevMonth => { const newMonth = new Date(prevMonth); @@ -125,168 +55,147 @@ export default function HabitTracker() { }); }; - const getDaysInMonth = (year: number, month: number) => { - return new Date(year, month + 1, 0).getDate(); - }; - const getCompletedHabitsForDate = (date: string) => { return habits.filter(habit => habit.completedDates.includes(date)); }; - const handleUpdateStreak = async (id: number, newStreak: number) => { - // Prevent negative streaks - if (newStreak < 0) return; + const goToCurrentWeek = () => { + setCurrentWeek(getCurrentWeekDates()); + }; - try { - // Update in database - await fetch(`http://localhost:5000/api/habits/${id}/streak`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ streak: newStreak }), - }); + const renderHabitsView = () => ( +
+
+ setNewHabit(e.target.value)} + placeholder="Add a new habit" + className={`flex-grow px-4 py-2 border rounded-lg ${theme.input}`} + /> + +
- // Update state - setHabits(habits.map(habit => - habit.id === id ? { ...habit, manualStreak: newStreak } : habit - )); - } catch (error) { - console.error('Error updating streak:', error); - } +
+
+

Weekly Progress

+
+ +
+ + +
+
+
+ + +
+
+ ); + + const renderCalendarView = () => ( + new Date(year, month + 1, 0).getDate()} + getCompletedHabitsForDate={getCompletedHabitsForDate} + /> + ); + + const renderSettingsView = () => { + const { theme, isDark, showStreaks, toggleDarkMode, toggleStreaks } = useThemeContext(); + + return ( +
+

Settings

+
+
+ Dark Mode + +
+ +
+ Show Streaks + +
+
+
+ ); }; return ( -
+
- - +
- {activeView === 'habits' && ( -
-
- setNewHabit(e.target.value)} - placeholder="Add a new habit" - className="flex-grow px-4 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" - /> - -
- -
-
-

Weekly Progress

-
- - -
-
- - -
-
- )} - - {activeView === 'calendar' && ( - - )} - - {activeView === 'settings' && ( -
-

Settings

-
-
- Dark Mode - -
-
-
- )} + {activeView === 'habits' && renderHabitsView()} + {activeView === 'calendar' && renderCalendarView()} + {activeView === 'settings' && renderSettingsView()}
); +} + +export default function HabitTracker() { + return ( + + + + ); } \ No newline at end of file diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index 1c236ea..dd2fab5 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ChevronLeft, ChevronRight } from 'lucide-react'; +import { useThemeContext } from '../contexts/ThemeContext'; import { Habit } from '../types'; interface CalendarProps { @@ -10,46 +11,55 @@ interface CalendarProps { getCompletedHabitsForDate: (date: string) => Habit[]; } -export function Calendar({ +export const Calendar: React.FC = ({ currentMonth, habits, onChangeMonth, getDaysInMonth, getCompletedHabitsForDate -}: CalendarProps) { +}) => { + const { theme } = useThemeContext(); + 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; }; + // Helper function to format date to YYYY-MM-DD + const formatDate = (date: Date): string => { + return date.toISOString().split('T')[0]; + }; + + // Get today's date in YYYY-MM-DD format + const today = formatDate(new Date()); + return ( -
-
-

+
+
+

{currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}

-
+
{daysOfWeek.map(day => ( -
+
{day}
))} @@ -61,13 +71,12 @@ export function Calendar({ const daysInMonth = getDaysInMonth(year, month); const daysInPrevMonth = getDaysInMonth(year, month - 1); - // 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]; + const date = formatDate(new Date(year, month - 1, day)); days.push({ date, dayNumber: day, @@ -77,7 +86,7 @@ export function Calendar({ // Current month days for (let i = 1; i <= daysInMonth; i++) { - const date = new Date(year, month, i).toISOString().split('T')[0]; + const date = formatDate(new Date(year, month, i)); days.push({ date, dayNumber: i, @@ -85,10 +94,10 @@ export function Calendar({ }); } - // Next month days to complete the grid - const remainingDays = 42 - days.length; // 6 rows * 7 days + // Next month days + const remainingDays = 42 - days.length; for (let i = 1; i <= remainingDays; i++) { - const date = new Date(year, month + 1, i).toISOString().split('T')[0]; + const date = formatDate(new Date(year, month + 1, i)); days.push({ date, dayNumber: i, @@ -99,41 +108,62 @@ export function Calendar({ return days.map(({ date, dayNumber, isCurrentMonth }) => { const completedHabits = getCompletedHabitsForDate(date); const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date)); + const isToday = date === today; return (
- + {dayNumber} {habits.length > 0 && (
-
+
0 - ? 'bg-green-500 shadow-sm shadow-green-200' - : 'bg-gray-300 dark:bg-gray-600' - } rounded-full transition-colors duration-200`} + className={` + h-4 w-4 rounded-full cursor-pointer + transition-colors duration-200 + ${completedHabits.length > 0 + ? 'bg-[#2ecc71] dark:bg-[#2ecc71] shadow-sm shadow-[#2ecc7150]' + : `bg-[#e9e9e8] dark:bg-[#393939]` + } + `} /> -
-
+
+
{completedHabits.length > 0 && (
- + ✓ Completed -
    +
      {completedHabits.map(habit => ( -
    • +
    • {habit.name}
      • ))} @@ -142,12 +172,12 @@ export function Calendar({ )} {incompleteHabits.length > 0 && (
      - + ○ Pending -
        +
          {incompleteHabits.map(habit => ( -
        • +
        • {habit.name}
          • ))} @@ -166,4 +196,4 @@ export function Calendar({
); -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/components/HabitList.tsx b/src/components/HabitList.tsx index 2361676..1cd223b 100644 --- a/src/components/HabitList.tsx +++ b/src/components/HabitList.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; import { Trash2 } from 'lucide-react'; import { Habit } from '../types'; +import { useThemeContext } from '../contexts/ThemeContext'; interface HabitListProps { habits: Habit[]; @@ -99,6 +100,8 @@ export function HabitList({ onDeleteHabit, onUpdateStreak, }: HabitListProps) { + const { showStreaks } = useThemeContext(); + useEffect(() => { console.log('Current week dates:', currentWeek.map(date => @@ -108,82 +111,114 @@ export function HabitList({ }, []); return ( - - - - - {currentWeek.map((dateStr, index) => { - const date = new Date(dateStr); - // Ensure date is interpreted in local timezone - const displayDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000); - - return ( - - ); - })} - - - - - - - {habits.map((habit) => ( - - - {currentWeek.map((date) => ( - + ))} + {showStreaks && ( + <> + + + + )} + + + ))} + +
Habit -
{daysOfWeek[index]}
-
- {displayDate.getDate()} -
- 		Current StreakBest StreakActions
- onUpdateHabit(habit.id, e.target.value)} - aria-label="Habit name" - placeholder="Enter habit name" - className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2" - /> - +
+ + + + + {currentWeek.map((dateStr, index) => { + const date = new Date(dateStr); + const displayDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000); + + return ( + + ); + })} + {showStreaks && ( + <> + + + + )} + + + + + {habits.map((habit) => ( + + - ))} - - - - - ))} - -
Habit +
{daysOfWeek[index]}
+
+ {displayDate.getDate()} +
+ 		Current StreakBest StreakActions
{ - onToggleHabit(habit.id, date); - const newCompletedDates = habit.completedDates.includes(date) - ? habit.completedDates.filter(d => d !== date) - : [...habit.completedDates, date]; - - const { bestStreak } = calculateStreak(newCompletedDates); - onUpdateStreak(habit.id, bestStreak); - }} - aria-label={`Mark ${habit.name} as completed for ${date}`} - className="w-4 h-4 rounded border-gray-300 dark:border-gray-600" + type="text" + value={habit.name} + onChange={(e) => onUpdateHabit(habit.id, e.target.value)} + aria-label="Habit name" + placeholder="Enter habit name" + className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2" /> - - {calculateStreak(habit.completedDates || []).currentStreak} - - - - {calculateStreak(habit.completedDates || []).bestStreak} - - - -
+ {currentWeek.map((date) => ( +
+ + + + {calculateStreak(habit.completedDates || []).currentStreak} + + + + {calculateStreak(habit.completedDates || []).bestStreak} + + + +
+
); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..f653652 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { Plus, CalendarIcon, SettingsIcon } from 'lucide-react'; +import { useThemeContext } from '../contexts/ThemeContext'; + +type View = 'habits' | 'calendar' | 'settings'; + +interface SidebarProps { + activeView: View; + setActiveView: (view: View) => void; +} + +export const Sidebar: React.FC = ({ activeView, setActiveView }) => { + const { theme } = useThemeContext(); + + return ( + + ); +}; \ No newline at end of file diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..13eb285 --- /dev/null +++ b/src/contexts/ThemeContext.tsx @@ -0,0 +1,48 @@ +import React, { createContext, useContext, useState, useEffect } from 'react'; +import { Theme, useTheme } from '../styles/theme'; + +interface ThemeContextType { + theme: Theme; + isDark: boolean; + showStreaks: boolean; + toggleDarkMode: () => void; + toggleStreaks: () => void; +} + +const ThemeContext = createContext(undefined); + +export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [isDark, setIsDark] = useState(() => localStorage.getItem('darkMode') === 'true'); + const [showStreaks, setShowStreaks] = useState(() => localStorage.getItem('showStreaks') !== 'false'); + const theme = useTheme(isDark); + + useEffect(() => { + if (isDark) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + localStorage.setItem('darkMode', isDark.toString()); + }, [isDark]); + + useEffect(() => { + localStorage.setItem('showStreaks', showStreaks.toString()); + }, [showStreaks]); + + const toggleDarkMode = () => setIsDark(!isDark); + const toggleStreaks = () => setShowStreaks(!showStreaks); + + return ( + + {children} + + ); +}; + +export const useThemeContext = () => { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useThemeContext must be used within a ThemeProvider'); + } + return context; +}; \ No newline at end of file diff --git a/src/hooks/useHabits.ts b/src/hooks/useHabits.ts new file mode 100644 index 0000000..7b8002b --- /dev/null +++ b/src/hooks/useHabits.ts @@ -0,0 +1,99 @@ +import { useState } from 'react'; +import { Habit } from '../types'; + +export const useHabits = () => { + const [habits, setHabits] = useState([]); + + const fetchHabits = async () => { + try { + const response = await fetch('http://localhost:5000/api/habits'); + const data = await response.json(); + setHabits(data); + } catch (error) { + console.error('Error fetching habits:', error); + setHabits([]); + } + }; + + const addHabit = async (name: string) => { + try { + const response = await fetch('http://localhost:5000/api/habits', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name }), + }); + if (response.ok) { + await fetchHabits(); + return true; + } + return false; + } catch (error) { + console.error('Error adding habit:', error); + return false; + } + }; + + const toggleHabit = async (id: number, date: string) => { + try { + await fetch(`http://localhost:5000/api/habits/${id}/toggle`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ date }), + }); + await fetchHabits(); + } catch (error) { + console.error('Error toggling habit:', error); + } + }; + + const updateHabit = async (id: number, name: string) => { + try { + await fetch(`http://localhost:5000/api/habits/${id}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name }), + }); + await fetchHabits(); + } catch (error) { + console.error('Error updating habit:', error); + } + }; + + const deleteHabit = async (id: number) => { + try { + await fetch(`http://localhost:5000/api/habits/${id}`, { + method: 'DELETE', + }); + await fetchHabits(); + } catch (error) { + console.error('Error deleting habit:', error); + } + }; + + const updateStreak = async (id: number, newStreak: number) => { + if (newStreak < 0) return; + + try { + await fetch(`http://localhost:5000/api/habits/${id}/streak`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ streak: newStreak }), + }); + setHabits(habits.map(habit => + habit.id === id ? { ...habit, manualStreak: newStreak } : habit + )); + } catch (error) { + console.error('Error updating streak:', error); + } + }; + + return { + habits, + fetchHabits, + addHabit, + toggleHabit, + updateHabit, + deleteHabit, + updateStreak + }; +}; \ No newline at end of file diff --git a/src/hooks/useWeek.ts b/src/hooks/useWeek.ts new file mode 100644 index 0000000..9e82a5e --- /dev/null +++ b/src/hooks/useWeek.ts @@ -0,0 +1,34 @@ +import { useState } from 'react'; + +export const useWeek = () => { + const [currentWeek, setCurrentWeek] = useState([]); + + const getCurrentWeekDates = () => { + const now = new Date(); + const dayOfWeek = now.getDay(); + const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); + const monday = new Date(now.setDate(diff)); + return Array.from({ length: 7 }, (_, i) => { + const date = new Date(monday); + date.setDate(monday.getDate() + i); + return date.toISOString().split('T')[0]; + }); + }; + + const changeWeek = (direction: 'prev' | 'next') => { + const firstDay = new Date(currentWeek[0]); + const newFirstDay = new Date(firstDay.setDate(firstDay.getDate() + (direction === 'prev' ? -7 : 7))); + setCurrentWeek(Array.from({ length: 7 }, (_, i) => { + const date = new Date(newFirstDay); + date.setDate(newFirstDay.getDate() + i); + return date.toISOString().split('T')[0]; + })); + }; + + return { + currentWeek, + setCurrentWeek, + getCurrentWeekDates, + changeWeek + }; +}; \ No newline at end of file diff --git a/src/styles/theme.ts b/src/styles/theme.ts new file mode 100644 index 0000000..8df1968 --- /dev/null +++ b/src/styles/theme.ts @@ -0,0 +1,125 @@ +export const lightTheme = { + // Background colors + background: 'bg-[#ffffff]', + cardBackground: 'bg-[#ffffff]', + sidebarBackground: 'bg-[#fbfbfa]', + + // Text colors + text: 'text-[#37352f]', + mutedText: 'text-[#787774]', + + // Border colors + border: 'border-[#e9e9e8]', + + // Interactive elements + button: { + primary: 'bg-[#37352f] text-white hover:bg-[#2f2f2f]', + secondary: 'bg-[#f1f1ef] text-[#37352f] hover:bg-[#e9e9e8]', + icon: 'hover:bg-[#f1f1ef] text-[#37352f]' + }, + + // Input elements + input: 'bg-[#ffffff] border-[#e9e9e8] focus:border-[#37352f] text-[#37352f]', + + // Calendar specific + calendarDay: 'bg-[#ffffff] hover:bg-[#f1f1ef]', + calendarDaySelected: 'bg-[#37352f] text-white', + + // Habit list specific + habitItem: 'hover:bg-[#f1f1ef]', + habitCheckbox: 'border-[#e9e9e8] text-[#37352f]', + + // Calendar specific (expanded) + calendar: { + background: 'bg-[#ffffff]', + header: 'text-[#37352f]', + weekDay: 'text-[#787774]', + day: { + default: 'bg-[#ffffff] hover:bg-[#f1f1ef] text-[#37352f] shadow-sm', + selected: 'bg-[#37352f] text-white', + today: 'border-[#37352f]', + otherMonth: 'text-[#787774] bg-[#fafafa]' + }, + navigation: { + button: 'hover:bg-[#f1f1ef] text-[#37352f]', + icon: 'h-5 w-5 text-[#37352f]' + }, + tooltip: { + background: 'bg-[#ffffff]', + border: 'border-[#e9e9e8]', + shadow: 'shadow-lg shadow-[#00000008]' + } + }, + + // Navigation + nav: { + active: 'bg-[#f1f1ef] text-[#37352f]', + inactive: 'text-[#37352f] hover:bg-[#f1f1ef]' + } +}; + +export const darkTheme = { + // Background colors + background: 'bg-[#191919]', + cardBackground: 'bg-[#2f2f2f]', + sidebarBackground: 'bg-[#191919]', + + // Text colors + text: 'text-[#ffffff]', + mutedText: 'text-[#999999]', + + // Border colors + border: 'border-[#393939]', + + // Interactive elements + button: { + primary: 'bg-[#ffffff] text-[#191919] hover:bg-[#e6e6e6]', + secondary: 'bg-[#363636] text-[#ffffff] hover:bg-[#424242]', + icon: 'hover:bg-[#363636] text-[#ffffff]' + }, + + // Input elements + input: 'bg-[#2f2f2f] border-[#393939] focus:border-[#525252] text-[#ffffff]', + + // Calendar specific + calendarDay: 'bg-[#2f2f2f] hover:bg-[#363636]', + calendarDaySelected: 'bg-[#ffffff] text-[#191919]', + + // Habit list specific + habitItem: 'hover:bg-[#363636]', + habitCheckbox: 'border-[#393939] text-[#ffffff]', + + // Calendar specific (expanded) + calendar: { + background: 'bg-[#191919]', + header: 'text-[#ffffff]', + weekDay: 'text-[#999999]', + day: { + default: 'bg-[#2f2f2f] hover:bg-[#363636] text-[#ffffff] shadow-md shadow-[#00000030]', + selected: 'bg-[#ffffff] text-[#191919]', + today: 'border-[#ffffff]', + otherMonth: 'text-[#666666] bg-[#242424]' + }, + navigation: { + button: 'hover:bg-[#363636] text-[#ffffff]', + icon: 'h-5 w-5 text-[#ffffff]' + }, + tooltip: { + background: 'bg-[#2f2f2f]', + border: 'border-[#393939]', + shadow: 'shadow-lg shadow-[#00000050]' + } + }, + + // Navigation + nav: { + active: 'bg-[#363636] text-[#ffffff]', + inactive: 'text-[#ffffff] hover:bg-[#363636]' + } +}; + +export type Theme = typeof lightTheme; + +export const useTheme = (isDark: boolean): Theme => { + return isDark ? darkTheme : lightTheme; +}; \ No newline at end of file