function MainComponent() { const [selectedImage, setSelectedImage] = React.useState(0); const [images, setImages] = React.useState([ { src: "/path/to/image1.jpg", alt: "イベントで撮影した写真1" }, { src: "/path/to/image2.jpg", alt: "イベントで撮影した写真2" }, { src: "/path/to/image3.jpg", alt: "イベントで撮影した写真3" }, { src: "/path/to/image4.jpg", alt: "イベントで撮影した写真4" }, { src: "/path/to/image5.jpg", alt: "イベントで撮影した写真5" }, { src: "/path/to/image6.jpg", alt: "イベントで撮影した写真6" }, { src: "/path/to/image7.jpg", alt: "イベントで撮影した写真7" }, { src: "/path/to/image8.jpg", alt: "イベントで撮影した写真8" } ]); const renderThumbnails = images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image.src, alt: image.alt, className: "w-[75px] h-[56.25px] object-cover cursor-pointer m-1", onClick: ()=>setSelectedImage(index), __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this })); const handleNext = ()=>{ setSelectedImage((prev)=>(prev + 1) % images.length); }; const handlePrevious = ()=>{ setSelectedImage((prev)=>(prev - 1 + images.length) % images.length); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-4xl font-semibold my-8 text-[#333]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "イベントギャラリー"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-4", onClick: handlePrevious, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-4xl cursor-pointer", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: images[selectedImage].src, alt: images[selectedImage].alt, className: "max-w-full h-auto object-cover mx-6", onClick: ()=>window.open(images[selectedImage].src, "_blank"), __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-4", onClick: handleNext, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-4xl cursor-pointer", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center overflow-x-auto mt-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, renderThumbnails)); }