33 lines
855 B
Plaintext
33 lines
855 B
Plaintext
|
```tsx
|
||
|
|
// src/components/AddTodo.tsx
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import styles from '../styles/AddTodo.module.css';
|
||
|
|
|
||
|
|
export const AddTodo: React.FC<{ onAdd: (text: string) => void }> = ({ onAdd }) => {
|
||
|
|
const [text, setText] = useState('');
|
||
|
|
const [error, setError] = useState('');
|
||
|
|
|
||
|
|
const handleSubmit = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (!text.trim()) {
|
||
|
|
setError('Todo text cannot be empty');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
onAdd(text.trim());
|
||
|
|
setText('');
|
||
|
|
setError('');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={handleSubmit} className={styles.form}>
|
||
|
|
<input
|
||
|
|
value={text}
|
||
|
|
onChange={(e) => setText(e.target.value)}
|
||
|
|
placeholder='Add a new todo'
|
||
|
|
/>
|
||
|
|
{error && <div className={styles.error}>{error}</div>}
|
||
|
|
<button type='submit'>Add Todo</button>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
```
|