function MainComponent() { const [products, setProducts] = React.useState([]); const [order, setOrder] = React.useState({ items: [], totalPrice: 0, contact: '', address: '', phone: '' }); const addToCart = (productId)=>{ const product = products.find((p)=>p.id === productId); if (!order.items.find((item)=>item.id === productId)) { setOrder((prevOrder)=>({ ...prevOrder, items: [ ...prevOrder.items, product ], totalPrice: prevOrder.totalPrice + product.price })); } }; const handleCheckout = (e)=>{ e.preventDefault(); }; let cartSummary; if (order.items.length > 0) { cartSummary = /*#__PURE__*/ React.createElement("section", { className: "mt-10", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "سبد خرید"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, order.items.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, item.price.toLocaleString('fa-IR'), " تومان")))), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "جمع کل: ", order.totalPrice.toLocaleString('fa-IR'), " تومان")); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0E5CF] font-crimson-text", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#8D6A5F] text-white p-4 text-center", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "آراد دیزاین")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imageUrl, alt: product.name + " design", className: "w-full h-[200px] object-cover mx-auto", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mt-3", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "my-3", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "قیمت: ", product.price.toLocaleString('fa-IR'), " تومان"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product.id), className: "mt-3 bg-[#8D6A5F] text-white px-6 py-2 rounded hover:bg-[#7A5A4F] transition-colors", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "افزودن به سبد خرید")))), cartSummary, /*#__PURE__*/ React.createElement("section", { className: "mt-10", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleCheckout, className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "ثبت سفارش"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "contact", className: "block mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "نام و نام خانوادگی"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "contact", name: "contact", onChange: (e)=>setOrder({ ...order, contact: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "address", className: "block mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "آدرس"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "address", name: "address", onChange: (e)=>setOrder({ ...order, address: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "تلفن"), /*#__PURE__*/ React.createElement("input", { type: "tel", id: "phone", name: "phone", onChange: (e)=>setOrder({ ...order, phone: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#8D6A5F] text-white px-6 py-2 rounded hover:bg-[#7A5A4F] transition-colors", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "پرداخت آنلاین")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#8D6A5F] text-white p-4 text-center", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "تمامی حقوق این وبسایت متعلق به آراد دیزاین می‌باشد."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "ایمیل: info@araddesign.com"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "تلفن: +98 21 12345678"))); }