function MainComponent() { const [books, setBooks] = React.useState([ { id: 1, name: "本１", status: "貸出中" }, { id: 2, name: "本２", status: "利用可能" }, { id: 3, name: "本３", status: "貸出中" } ]); const handleBorrow = (e)=>{ e.preventDefault(); const bookName = e.target.bookName.value; const updatedBooks = books.map((book)=>book.name === bookName && book.status === '利用可能' ? { ...book, status: '貸出中' } : book); setBooks(updatedBooks); e.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full p-4 bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center mb-6 text-[#333]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "本の貸し借りシステム"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4 w-[300px]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "貸出状況"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, books.map((book)=>/*#__PURE__*/ React.createElement("li", { className: "my-2", key: book.id, __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, book.name, ": ", book.status)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4 w-[300px]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "貸出申請"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleBorrow, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "bookName", className: "border border-gray-300 p-2 w-full mb-4", placeholder: "本の名前", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "申請"))))); }