function MainComponent() { const [currentImage, setCurrentImage] = React.useState(0); const propertyImages = [ '/path/to/image1.jpg', '/path/to/image2.jpg', '/path/to/image3.jpg', '/path/to/image4.jpg', '/path/to/image5.jpg', '/path/to/image6.jpg', '/path/to/image7.jpg', '/path/to/image8.jpg', '/path/to/image9.jpg' ]; const nextImage = ()=>{ setCurrentImage((currentImage + 1) % propertyImages.length); }; const prevImage = ()=>{ setCurrentImage((currentImage - 1 + propertyImages.length) % propertyImages.length); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#121212] font-roboto text-center", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "物件名"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "住所")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row items-center mt-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full lg:w-[300px] h-[300px]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: propertyImages[currentImage], alt: `物件の外観写真${currentImage + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: prevImage, className: "absolute top-1/2 -left-4 transform -translate-y-1/2 text-white text-2xl", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: nextImage, className: "absolute top-1/2 -right-4 transform -translate-y-1/2 text-white text-2xl", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2 mt-4 lg:mt-0 lg:ml-4 w-full lg:w-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, propertyImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `他の写真${index + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full table-fixed border border-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b border-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "詳細項目1"), /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "詳細１の値")), /*#__PURE__*/ React.createElement("tr", { className: "border-b border-[#121212]", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "詳細項目2"), /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "詳細２の値")), /*#__PURE__*/ React.createElement("tr", { className: "border-b border-[#121212]", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "詳細項目3"), /*#__PURE__*/ React.createElement("td", { className: "p-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "詳細３の値")))))); }

詳細項目1	詳細１の値
詳細項目2	詳細２の値
詳細項目3	詳細３の値