21 lines
625 B
Plaintext
21 lines
625 B
Plaintext
|
```tsx
|
||
|
|
// src/components/TodoItem.tsx
|
||
|
|
import React from 'react';
|
||
|
|
import styles from '../styles/TodoItem.module.css';
|
||
|
|
|
||
|
|
interface TodoItemProps {
|
||
|
|
id: string;
|
||
|
|
text: string;
|
||
|
|
completed: boolean;
|
||
|
|
onToggle: (id: string) => void;
|
||
|
|
onDelete: (id: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const TodoItem: React.FC<TodoItemProps> = ({ id, text, completed, onToggle, onDelete }) => (
|
||
|
|
<div className={styles.todoItem}>
|
||
|
|
<input type='checkbox' checked={completed} onChange={() => onToggle(id)} />
|
||
|
|
<span className={completed ? styles.completed : ''}>{text}</span>
|
||
|
|
<button onClick={() => onDelete(id)}>Delete</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
```
|