function DarkOverlayEffect({ overlayColor, overlayOpacity }) { const overlayStyle = `absolute inset-0 ${overlayColor} opacity-${overlayOpacity}`; return /*#__PURE__*/ React.createElement("div", { className: overlayStyle, __source: { fileName: "", lineNumber: 3, columnNumber: 10 }, __self: this }); } function DarkOverlayEffectStory() { return /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[400px]", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DarkOverlayEffect, { overlayColor: "bg-black", overlayOpacity: "30", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentPage, setCurrentPage] = React.useState(1); const brands = [ "ブランド1", "ブランド2", "ブランド3", "ブランド4", "ブランド5", "ブランド6", "ブランド7", "ブランド8", "ブランド9", "ブランド10" ]; const brandsPerPage = 10; const totalPages = Math.ceil(brands.length / brandsPerPage); const nextPage = ()=>{ if (currentPage < totalPages) { setCurrentPage(currentPage + 1); } }; const prevPage = ()=>{ if (currentPage > 1) { setCurrentPage(currentPage - 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white font-sans text-black", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "relative", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/struggling-person.jpg", alt: "長いパンツに苦戦している人物", className: "w-full h-[50vh] object-cover", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-30", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-5xl font-bold text-white text-center bg-[#001F3F] px-6 py-3 rounded-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "股下80cmが欲しい")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, brands.map((brand, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "py-3 border-b last:border-b-0 hover:bg-gray-100 transition duration-300 cursor-pointer", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, brand)))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, currentPage, " / ", totalPages), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevPage, disabled: currentPage === 1, className: "px-4 py-2 bg-[#001F3F] text-white rounded hover:bg-[#00305F] disabled:opacity-50", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "前へ"), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, disabled: currentPage === totalPages, className: "px-4 py-2 bg-[#001F3F] text-white rounded hover:bg-[#00305F] disabled:opacity-50", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "次へ")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#001F3F] text-white py-4 mt-8", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 text-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "© 2023 股下80cmが欲しい. All rights reserved.")))); }