function MainComponent() { const [potatoes, setPotatoes] = React.useState([ { id: 1, name: "Classic Potato", price: 100, img: "/classic-potato.jpg" }, { id: 2, name: "Sweet Potato", price: 120, img: "/sweet-potato.jpg" }, { id: 3, name: "Purple Potato", price: 150, img: "/purple-potato.jpg" } ]); const [cart, setCart] = React.useState([]); const addToCart = (potato)=>{ setCart([ ...cart, potato ]); }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-[#f7f7f7] flex flex-col items-center pt-10 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "じゃがいもの販売"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 px-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, potatoes.map((potato)=>/*#__PURE__*/ React.createElement("div", { key: potato.id, className: "bg-white border border-[#dedede] shadow-lg rounded-lg p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: potato.img, alt: `${potato.name} image`, className: "w-48 h-48 object-cover mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, potato.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, potato.price, "円"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(potato), className: "mt-2 px-4 py-2 bg-[#008000] text-white rounded hover:bg-[#006400]", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "カートに追加")))), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full max-w-[600px] bg-white border-t-[8px] border-[#008000] shadow-lg rounded-lg p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "カート"), cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center border-b py-2 last:border-none", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("span", { className: "text-[#666]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, item.price, "円"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-right text-lg text-[#121212]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "合計: ", cart.reduce((total, item)=>total + item.price, 0), "円"))); }