File size: 1,729 Bytes
9fed9f2 3f5e81d 9fed9f2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React, { useState } from 'react';
interface SelectedWord {
word: string;
}
interface TextSelectorProps {
onWordSelect: React.Dispatch<React.SetStateAction<SelectedWord[]>>;
}
const TextSelector: React.FC<TextSelectorProps> = ({ onWordSelect }) => {
const [text, setText] = useState('');
const [selectedText, setSelectedText] = useState<string[]>([]);
const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setText(e.target.value);
};
const clearSelection = () => {
setSelectedText([]);
onWordSelect([]);
};
const handleWordClick = (word: string) => {
if (selectedText.includes(word)) {
setSelectedText(prev => prev.filter(w => w !== word));
onWordSelect(prev => prev.filter(item => item.word !== word));
} else {
setSelectedText(prev => [...prev, word]);
onWordSelect(prev => [...prev, { word }]);
}
};
return (
<div className="text-selector">
<h2>Input Text Section</h2>
<textarea
value={text}
onChange={handleTextChange}
placeholder="Enter or paste English text here and then select one by one all words that are harder to you..."
/>
<div className="button-group">
<button onClick={clearSelection} className="clear-button">
Clear Selection
</button>
</div>
<div className="words-container">
{text.split(/\s+/).map((word, index) => (
<span
key={index}
className={`word ${selectedText.includes(word) ? 'selected' : ''}`}
onClick={() => handleWordClick(word)}
>
{word}
</span>
))}
</div>
</div>
);
};
export default TextSelector;
|