37 lines
847 B
TypeScript
37 lines
847 B
TypeScript
import { Todo } from '../api/todos';
|
|
|
|
interface TodoItemProps {
|
|
todo: Todo;
|
|
onToggle: (id: number) => Promise<void>;
|
|
onDelete: (id: number) => Promise<void>;
|
|
}
|
|
|
|
export const TodoItem = ({ todo, onToggle, onDelete }: TodoItemProps) => {
|
|
const handleToggle = () => {
|
|
onToggle(todo.id);
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
onDelete(todo.id);
|
|
};
|
|
|
|
return (
|
|
<div className="todo-item">
|
|
<div className="todo-content">
|
|
<input
|
|
type="checkbox"
|
|
checked={todo.completed}
|
|
onChange={handleToggle}
|
|
className="todo-checkbox"
|
|
/>
|
|
<span className={todo.completed ? 'todo-title completed' : 'todo-title'}>
|
|
{todo.title}
|
|
</span>
|
|
</div>
|
|
<button onClick={handleDelete} className="delete-button">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|