65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import TaskItem from './TaskItem';
|
|
|
|
interface Task {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
completed: boolean;
|
|
startTime?: string;
|
|
endTime?: string;
|
|
dayOfWeek?: number; // 0 = Sunday, 1 = Monday, etc.
|
|
isRolling?: boolean;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
}
|
|
|
|
interface TaskListProps {
|
|
tasks: Task[];
|
|
onTaskToggleComplete?: (id: string) => void;
|
|
onTaskDelete?: (id: string) => void;
|
|
onTaskEdit?: (task: Task) => void;
|
|
onTaskClick?: (task: Task) => void;
|
|
onTaskToggleRolling?: (id: string) => void;
|
|
}
|
|
|
|
const TaskList: React.FC<TaskListProps> = ({
|
|
tasks,
|
|
onTaskToggleComplete,
|
|
onTaskDelete,
|
|
onTaskEdit,
|
|
onTaskClick,
|
|
onTaskToggleRolling
|
|
}) => {
|
|
if (tasks.length === 0) {
|
|
return (
|
|
<div className="empty-state text-center py-8 bg-gray-50 rounded-lg border border-gray-200">
|
|
<div className="mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-gray-600">No tasks for this day</p>
|
|
<p className="text-sm text-gray-500 mt-1">Add a new task using the form above</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ul className="task-list space-y-2">
|
|
{tasks.map((task) => (
|
|
<li key={task.id}>
|
|
<TaskItem
|
|
task={task}
|
|
onToggleComplete={onTaskToggleComplete || (() => { })}
|
|
onDelete={onTaskDelete || (() => { })}
|
|
onEdit={onTaskEdit || (() => { })}
|
|
onToggleRolling={onTaskToggleRolling || (() => { })}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default TaskList; |