function MainComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const [menuOpen, setMenuOpen] = React.useState(false); const images = React.useMemo(()=>[ { index: 1, caption: "1枚目の絵", url: "https://via.placeholder.com/512x768" }, { index: 2, caption: "2枚目の絵", url: "https://via.placeholder.com/512x768" }, { index: 3, caption: "3枚目の絵", url: "https://via.placeholder.com/512x768" } ], []); const readingTime = React.useMemo(()=>images.map((item)=>1000 * Math.max(Math.min(item.caption.length * 100, 7000), 5000)), [ images ]); React.useEffect(()=>{ const intervalId = setInterval(()=>{ setCurrentIndex((currentIndex)=>(currentIndex + 1) % images.length); }, readingTime[currentIndex] || 5000); return ()=>clearInterval(intervalId); }, [ currentIndex, images.length, readingTime ]); const nextImage = ()=>{ setCurrentIndex((currentIndex)=>(currentIndex + 1) % images.length); }; const previousImage = ()=>{ setCurrentIndex((currentIndex)=>(currentIndex - 1 + images.length) % images.length); }; const toggleMenu = ()=>{ setMenuOpen(!menuOpen); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-10 flex items-center justify-between w-full h-full overflow-hidden", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: previousImage, className: "z-30 text-6xl text-white cursor-pointer p-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "<"), images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: image.url, src: image.url, alt: `Image showing a visual representation of ${image.caption}`, className: `absolute inset-0 object-cover w-full h-full transition-opacity duration-1000 ${currentIndex === index ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 left-1/2 transform -translate-x-1/2 p-4 bg-[rgba(255,255,255,0.8)] rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, images[currentIndex].caption)), /*#__PURE__*/ React.createElement("button", { onClick: nextImage, className: "z-30 text-6xl text-white cursor-pointer p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, ">")), /*#__PURE__*/ React.createElement("div", { className: "fixed top-5 right-5 z-50", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: `z-50 text-3xl text-white cursor-pointer p-2 ${menuOpen ? "fa fa-times" : "fa fa-bars"}`, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "mt-3 w-48 bg-white rounded-md shadow-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "text-left", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Report Bug"), /*#__PURE__*/ React.createElement("li", { className: "p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Feature Request"), /*#__PURE__*/ React.createElement("li", { className: "p-2", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 59, columnNumber: 35 }, __self: this }, "Twitter Link"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } img { animation: fadeInOut ${readingTime[currentIndex] / 1000}s ease-in-out infinite alternate; } `)); }