24 lines
715 B
TypeScript
24 lines
715 B
TypeScript
import type { Task } from "../types/task";
|
|
|
|
interface TaskItemProps {
|
|
task: Task;
|
|
onDelete: (id: number) => void;
|
|
onToggle: (id: number) => void;
|
|
}
|
|
|
|
export const TaskItem = ({ task, onDelete, onToggle }: TaskItemProps) => {
|
|
return (
|
|
<li className="{`task-item ${task.completed ? 'completed' : ''}`}">
|
|
<input
|
|
type="checkbox"
|
|
checked={task.completed}
|
|
onChange={() => onToggle(task.id)}
|
|
/>
|
|
<span style={{ textDecoration: task.completed ? 'line-through' : 'none'}}>
|
|
{task.title}
|
|
</span>
|
|
<button onClick={() => onDelete(task.id)}>Delete</button>
|
|
</li>
|
|
);
|
|
};
|