function VideoMallEcSite({ product, onAddToCart, onAddToFavorites }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-gray-200 rounded-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Product image of ${product.name}`, className: "w-[300px] h-[300px] object-cover mx-auto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mt-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#333] mt-2", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded hover:bg-blue-600", onClick: ()=>onAddToCart(product), name: "addToCart", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "カートに追加"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white font-roboto py-2 px-4 rounded hover:bg-yellow-600", onClick: ()=>onAddToFavorites(product), name: "addToFavorites", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "お気に入りに追加"))); } function MainComponent() { const [cartItems, setCartItems] = React.useState([]); const [favorites, setFavorites] = React.useState([]); const handleAddToCart = (product)=>{ setCartItems([ ...cartItems, product ]); }; const handleAddToFavorites = (product)=>{ setFavorites([ ...favorites, product ]); }; const products = [ { name: "Product 1", price: "$10.00", image: "path/to/image1.jpg" }, { name: "Product 2", price: "$20.00", image: "path/to/image2.jpg" }, { name: "Product 3", price: "$30.00", image: "path/to/image3.jpg" }, { name: "Product 4", price: "$40.00", image: "path/to/image4.jpg" }, { name: "Product 5", price: "$50.00", image: "path/to/image5.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#f8f8f8] p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement(VideoMallEcSite, { key: index, product: product, onAddToCart: handleAddToCart, onAddToFavorites: handleAddToFavorites, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#f8f8f8] p-4 mt-8", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Footer content"))); }