function MainComponent({ words, addWord, showList, toggleList, searchWords }) { const [word, setWord] = React.useState(''); const [pronunciation, setPronunciation] = React.useState(''); const [definition, setDefinition] = React.useState(''); const [search, setSearch] = React.useState(''); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "พจนานุกรมส่วนตัว"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "word", type: "text", placeholder: "คำศัพท์", className: "border p-2 mr-2", value: word, onChange: (e)=>setWord(e.target.value), __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "pronunciation", type: "text", placeholder: "เสียง", className: "border p-2 mr-2", value: pronunciation, onChange: (e)=>setPronunciation(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "definition", type: "text", placeholder: "ความหมาย", className: "border p-2", value: definition, onChange: (e)=>setDefinition(e.target.value), __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ addWord(word, pronunciation, definition); setWord(''); setPronunciation(''); setDefinition(''); }, className: "bg-blue-500 text-white p-2 mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "บันทึก"), /*#__PURE__*/ React.createElement("button", { onClick: toggleList, className: "bg-green-500 text-white p-2 mb-4 ml-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, showList ? 'ลบ' : 'คำศัพท์ทั้งหมด'), showList && /*#__PURE__*/ React.createElement("div", { className: "border p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "คำศัพท์"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "เสียง"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "ความหมาย"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, words.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-gray-100", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, item.word), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, item.pronunciation), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, item.definition)))))), /*#__PURE__*/ React.createElement("div", { className: "relative mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "search", type: "text", placeholder: "คำศัพท์", className: "border p-2 pr-10 w-full", value: search, onChange: (e)=>setSearch(e.target.value), onKeyDown: (e)=>e.key === 'Enter' && searchWords(search), __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>searchWords(search), className: "absolute right-0 top-0 mr-2 mt-2 bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "ค้นหา"))); } function StoryComponent() { const [words, setWords] = React.useState([]); const [showList, setShowList] = React.useState(false); const addWord = (word, pronunciation, definition)=>{ setWords((prevWords)=>[ ...prevWords, { word, pronunciation, definition } ]); }; const toggleList = ()=>{ setShowList(!showList); }; const searchWords = (search)=>{ console.log('Search for:', search); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { words: words, addWord: addWord, showList: showList, toggleList: toggleList, searchWords: searchWords, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this })); }