function ProductDisplaySquare({ image, name }) { return /*#__PURE__*/ React.createElement("img", { src: image, alt: `${name}`, className: "w-[120px] h-[120px] object-contain", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ProductDisplaySquareStory() { const products = [ { image: "./path/to/product1/image.jpg", name: "製品1名" }, { image: "./path/to/product2/image.jpg", name: "製品2名" } ]; return /*#__PURE__*/ React.createElement("a", { href: "/ec-product-selection", target: "_self", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 14, columnNumber: 52 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement(ProductDisplaySquare, { key: index, image: product.image, name: product.name, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })))); } function MainComponent() { const [cartCount, setCartCount] = React.useState(0); const [currentPage, setCurrentPage] = React.useState(1); const productsPerPage = 6; const addToCart = ()=>{ setCartCount(cartCount + 1); }; const changePage = (direction)=>{ setCurrentPage(currentPage + direction); }; const totalProducts = Array.from({ length: 20 }).map((_, index)=>({ id: `product-${index + 1}`, name: `商品${index + 1}`, image: `./img/product-${index + 1}-thumb.jpg` })); const pageCount = Math.ceil(totalProducts.length / productsPerPage); const productsToShow = totalProducts.slice((currentPage - 1) * productsPerPage, currentPage * productsPerPage); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-start gap-4 p-4 min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 m-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart text-2xl", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white flex justify-center items-center rounded-full text-xs", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, cartCount))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center flex-wrap gap-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, productsToShow.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "flex flex-col items-center gap-2 cursor-pointer", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ProductDisplaySquare, { image: product.image, name: product.name, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-2 py-1 bg-blue-500 text-white rounded", onClick: addToCart, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Add to Cart")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { disabled: currentPage === 1, onClick: ()=>changePage(-1), className: `px-4 py-2 ${currentPage === 1 ? 'bg-gray-300 text-gray-600 cursor-not-allowed' : 'bg-blue-500 text-white'} rounded`, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "<"), /*#__PURE__*/ React.createElement("span", { className: "px-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, currentPage), /*#__PURE__*/ React.createElement("button", { disabled: currentPage === pageCount, onClick: ()=>changePage(1), className: `ml-2 px-4 py-2 ${currentPage === pageCount ? 'bg-gray-300 text-gray-600 cursor-not-allowed' : 'bg-blue-500 text-white'} rounded`, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, ">"))); }