function MainComponent() { const [manga, setManga] = React.useState({ title: 'マンガのタイトル', author: '作者名', thumbnails: Array.from({ length: 100 }, (_, index)=>`/path/to/manga/page${index + 1}.jpg`), pages: 100 }); const [currentPage, setCurrentPage] = React.useState(0); const nextPage = ()=>{ setCurrentPage(currentPage < manga.pages - 2 ? currentPage + 2 : currentPage); }; const previousPage = ()=>{ setCurrentPage(currentPage > 0 ? currentPage - 2 : currentPage); }; const handleSwipe = (direction)=>{ if (direction === 'right') { previousPage(); } else if (direction === 'left') { nextPage(); } }; const handleFileUpload = (event)=>{ // Upload file logic }; const handleMangaSelection = (event)=>{ // Fetch and set manga based on selection }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-200 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-gray-800", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "漫画の投稿サイト"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, manga.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "作者: ", manga.author), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "ページ数: ", manga.pages), /*#__PURE__*/ React.createElement("select", { name: "mangaSelector", onChange: handleMangaSelection, className: "bg-white border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "-- 漫画を選択 --"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-4xl text-gray-600 p-2", onClick: previousPage, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "⬅️"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto scrolling-touch", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[800px] h-[600px]", onTouchStart: (e)=>handleSwipe('right'), onTouchEnd: (e)=>handleSwipe('left'), __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: manga.thumbnails[currentPage], alt: `漫画のページ${currentPage + 1}の投稿`, className: "absolute inset-0 w-[400px] h-full", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: manga.thumbnails[currentPage + 1], alt: `漫画のページ${currentPage + 2}の投稿`, className: "absolute inset-0 ml-[400px] w-[400px] h-full", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "text-4xl text-gray-600 p-2", onClick: nextPage, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "➡️")), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto scrolling-touch", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, manga.thumbnails.map((src, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: src, alt: `漫画のサムネイル${index + 1}`, className: "w-[100px] h-[80px]", onClick: ()=>setCurrentPage(index - index % 2), __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "mangaUpload", onChange: handleFileUpload, className: "bg-white border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })))); }