import pageData from "~/data/github-task-tracker.json"; export function GitHubTaskTracker() { const { data, updateData } = useData(pageData); const tasks = data.tasks || []; const currentDate = new Date(); const currentYear = currentDate.getFullYear(); // Generate dates for the past year const generateYearDates = () => { const dates = []; const startDate = new Date(currentYear, 0, 1); const endDate = new Date(currentYear, 11, 31); for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { dates.push(new Date(d)); } return dates; }; const yearDates = generateYearDates(); // Get task count for a specific date const getTasksForDate = (date) => { const dateStr = date.toISOString().split('T')[0]; return tasks.filter(task => task.date === dateStr).length; }; // Get color intensity based on task count const getIntensity = (count) => { if (count === 0) return 'bg-gray-100 dark:bg-gray-800'; if (count === 1) return 'bg-green-200 dark:bg-green-900'; if (count === 2) return 'bg-green-400 dark:bg-green-700'; if (count >= 3) return 'bg-green-600 dark:bg-green-500'; return 'bg-gray-100 dark:bg-gray-800'; }; // Add task for today const addTask = () => { const today = new Date().toISOString().split('T')[0]; const newTask = { id: Date.now(), date: today, title: `Task ${tasks.length + 1}`, completed: false }; updateData({ ...data, tasks: [...tasks, newTask] }); }; // Toggle task completion const toggleTask = (taskId) => { const updatedTasks = tasks.map(task => task.id === taskId ? { ...task, completed: !task.completed } : task ); updateData({ ...data, tasks: updatedTasks }); }; // Get today's tasks const todayTasks = tasks.filter(task => { const today = new Date().toISOString().split('T')[0]; return task.date === today; }); // Group dates by weeks for horizontal layout const groupByWeeks = (dates) => { // Start from the first Sunday of the year or before const firstDate = dates[0]; const startOfWeek = new Date(firstDate); startOfWeek.setDate(firstDate.getDate() - firstDate.getDay()); const weeks = []; const allDates = []; // Fill in dates to start from Sunday for (let d = new Date(startOfWeek); d < firstDate; d.setDate(d.getDate() + 1)) { allDates.push(null); // null for dates outside the year } // Add all year dates allDates.push(...dates); // Group into weeks (7 days each) for (let i = 0; i < allDates.length; i += 7) { weeks.push(allDates.slice(i, i + 7)); } return weeks; }; const weeks = groupByWeeks(yearDates); // Create grid with weeks as columns, days as rows const createGrid = () => { const grid = Array(7).fill(null).map(() => []); weeks.forEach(week => { week.forEach((date, dayIndex) => { grid[dayIndex].push(date); }); }); return grid; }; const grid = createGrid(); const dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; return (

Task Tracker {currentYear}

{/* Contribution Grid */}

{tasks.length} tasks completed this year

{/* Horizontal grid */}

{/* Day labels */}

{dayLabels.map((day, index) => (

{index % 2 === 1 ? day : ''}

))}

{/* Grid */}

{grid.map((row, dayIndex) => (

{row.map((date, weekIndex) => { if (!date) { return

; } const taskCount = getTasksForDate(date); const isToday = date.toDateString() === currentDate.toDateString(); return (

); })}

))}

{/* Legend */}

Less

{/* Today's Tasks */}

Today's Tasks

{todayTasks.length === 0 ? (

No tasks for today. Add one above!

) : (

{todayTasks.map((task) => (

toggleTask(task.id)} /> {task.title}

))}

)}

); }