function MainComponent() { const [books, setBooks] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const [bookTitle, setBookTitle] = React.useState(''); const [bookRating, setBookRating] = React.useState(1); const [thumbnail, setThumbnail] = React.useState(''); const [bookReview, setBookReview] = React.useState(''); const [bookCategory, setBookCategory] = React.useState(''); const [publicList, setPublicList] = React.useState(false); const [showPublic, setShowPublic] = React.useState(true); const addBook = ()=>{ setBooks(books.concat({ bookTitle, bookRating, thumbnail, bookReview, bookCategory, publicList })); setBookTitle(''); setBookRating(1); setThumbnail(''); setBookReview(''); setBookCategory(''); setPublicList(false); }; const toggleShowPublic = ()=>{ setShowPublic(!showPublic); }; const filteredBooks = searchTerm.length > 0 ? books.filter((book)=>book.bookTitle.toLowerCase().includes(searchTerm.toLowerCase())) : books; const publicBooks = showPublic ? filteredBooks.filter((book)=>book.publicList) : filteredBooks; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center text-[#121212] py-6", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "データサイエンティストの読書記録アプリ")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchTerm", placeholder: "本を検索", className: "p-2 border border-[#d1d5db] rounded", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bookTitle", placeholder: "本のタイトル", className: "p-2 border border-[#d1d5db] rounded", value: bookTitle, onChange: (e)=>setBookTitle(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 5 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `p-1 ${bookRating > index ? 'text-yellow-500' : 'text-gray-400'}`, onClick: ()=>setBookRating(index + 1), __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "⭐"))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "thumbnail", placeholder: "サムネイルURL", className: "p-2 border border-[#d1d5db] rounded", value: thumbnail, onChange: (e)=>setThumbnail(e.target.value), __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "bookReview", placeholder: "本の評価や感想", className: "p-2 border border-[#d1d5db] rounded w-[400px] h-[100px]", value: bookReview, onChange: (e)=>setBookReview(e.target.value), __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bookCategory", placeholder: "カテゴリ", className: "p-2 border border-[#d1d5db] rounded", value: bookCategory, onChange: (e)=>setBookCategory(e.target.value), __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "publicList", id: "publicList", className: "mr-2", checked: publicList, onChange: (e)=>setPublicList(e.target.checked), __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "publicList", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "リストを公開する")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-white p-2 rounded hover:bg-[#45a049]", onClick: addBook, __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "登録"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-700", onClick: toggleShowPublic, __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, showPublic ? '公開リストを非表示' : '公開リストを表示')), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, publicBooks.map((book, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-[#d1d5db] p-4 rounded mb-4 flex gap-4", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.thumbnail, alt: `サムネイル of ${book.bookTitle}`, className: "w-[100px] h-[150px] object-cover", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, book.bookTitle), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, `カテゴリ: ${book.bookCategory}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, `評価: ${'⭐'.repeat(book.bookRating)}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, book.bookReview)))))); }