function MainComponent() { const [showModal, setShowModal] = React.useState(false); const [selectedPhoto, setSelectedPhoto] = React.useState(null); const newPhotos = [ { src: 'path/to/new/photo1.jpg', alt: '新作写真1' }, { src: 'path/to/new/photo2.jpg', alt: '新作写真2' }, { src: 'path/to/new/photo3.jpg', alt: '新作写真3' }, { src: 'path/to/new/photo4.jpg', alt: '新作写真4' }, { src: 'path/to/new/photo5.jpg', alt: '新作写真5' }, { src: 'path/to/new/photo6.jpg', alt: '新作写真6' }, { src: 'path/to/new/photo7.jpg', alt: '新作写真7' }, { src: 'path/to/new/photo8.jpg', alt: '新作写真8' } ]; const recommendedPhotos = [ { src: 'path/to/recommended/photo1.jpg', alt: 'おすすめ写真1' }, { src: 'path/to/recommended/photo2.jpg', alt: 'おすすめ写真2' }, { src: 'path/to/recommended/photo3.jpg', alt: 'おすすめ写真3' }, { src: 'path/to/recommended/photo4.jpg', alt: 'おすすめ写真4' }, { src: 'path/to/recommended/photo5.jpg', alt: 'おすすめ写真5' }, { src: 'path/to/recommended/photo6.jpg', alt: 'おすすめ写真6' }, { src: 'path/to/recommended/photo7.jpg', alt: 'おすすめ写真7' }, { src: 'path/to/recommended/photo8.jpg', alt: 'おすすめ写真8' } ]; const openModal = (photo)=>{ setSelectedPhoto(photo); setShowModal(true); }; const closeModal = ()=>{ setSelectedPhoto(null); setShowModal(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "景色写真販売サイト"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white mx-2 flex items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "会員登録はこちら"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus ml-1", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white mx-2 flex items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-in-alt ml-1", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border rounded p-2 w-full md:w-1/2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "keyword", type: "text", className: "flex-grow outline-none", placeholder: "キーワード検索", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-gray-500", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex mt-2 md:mt-0 items-center md:ml-4 w-full md:w-1/2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "date_from", type: "date", className: "border rounded p-2 w-1/2", placeholder: "FROM", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "mx-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "~"), /*#__PURE__*/ React.createElement("input", { name: "date_to", type: "date", className: "border rounded p-2 w-1/2", placeholder: "TO", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "新作"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, newPhotos.map((photo, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border rounded overflow-hidden", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photo.src, alt: photo.alt, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal(photo), className: "w-full bg-blue-500 text-white py-2", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "購入する"))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "おすすめ"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, recommendedPhotos.map((photo, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border rounded overflow-hidden", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: photo.src, alt: photo.alt, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal(photo), className: "w-full bg-blue-500 text-white py-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "購入する")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#010101] text-white p-4 text-center", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "© ", new Date().getFullYear(), " 景色写真販売サイト")), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded w-[90%] md:w-[600px]", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedPhoto.src, alt: selectedPhoto.alt, className: "w-full h-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{}, className: "w-full bg-green-500 text-white py-2 mt-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "カートに追加"), /*#__PURE__*/ React.createElement("button", { onClick: closeModal, className: "w-full bg-red-500 text-white py-2 mt-2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "閉じる")))); }