function MainComponent() { const [word, setWord] = React.useState(""); const [description, setDescription] = React.useState(""); const [savedWords, setSavedWords] = React.useState([]); const handleWordSelect = (e)=>{ const selectedWord = e.target.value; const wordDescription = "選択された単語の例文です。"; setWord(selectedWord); setDescription(wordDescription); }; const toggleStatus = (index)=>{ setSavedWords((prevSavedWords)=>prevSavedWords.map((entry, i)=>i === index ? { ...entry, status: entry.status === "未学習" ? "学習中" : "未学習" } : entry)); }; React.useEffect(()=>{ const fetchedWords = [ { word: "テクノロジー", description: "技術や科学の応用分野における知識の総称。", link: "example.com/technology", date: "2023-01-01", status: "未学習" }, { word: "ビジネス", description: "商業活動や取引に関する用語。", link: "example.com/business", date: "2023-01-02", status: "学習中" } ]; setSavedWords(fetchedWords); }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F0F0] min-h-screen p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto text-2xl mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "ITパスポート過去問題と解答"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4 w-full lg:w-1/2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "word-select", name: "word", className: "font-roboto block mb-2 text-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "単語を選択:"), /*#__PURE__*/ React.createElement("select", { id: "word-select", name: "word", className: "block w-full border rounded p-2", onChange: handleWordSelect, __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "単語を選択"), /*#__PURE__*/ React.createElement("option", { value: "テクノロジー", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "テクノロジー"), /*#__PURE__*/ React.createElement("option", { value: "ビジネス", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "ビジネス"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "選択された単語:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, word)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "説明:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, description))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4 w-full lg:w-1/2", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "保存された単語と解説"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-5 gap-4 font-roboto text-md mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "単語"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "説明"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "問題リンク"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "登録日"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "学習状況")), savedWords.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "grid grid-cols-1 sm:grid-cols-5 gap-4 mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, entry.word), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, entry.description), /*#__PURE__*/ React.createElement("a", { href: entry.link, className: "text-blue-600", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, entry.link), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, entry.date), /*#__PURE__*/ React.createElement("button", { className: "text-center text-white bg-blue-500 rounded px-2", onClick: ()=>toggleStatus(index), __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, entry.status))))))); }