function MainComponent() { const [ordersHistory, setOrdersHistory] = React.useState([]); const [currentOrder, setCurrentOrder] = React.useState([]); const [selectedProduct, setSelectedProduct] = React.useState(''); const [quantity, setQuantity] = React.useState(1); const [paymentMethod, setPaymentMethod] = React.useState(''); const [showPromotion, setShowPromotion] = React.useState(false); const handleSelectProduct = (product)=>{ setSelectedProduct(product); }; const handleQuantityChange = (event)=>{ setQuantity(event.target.value); }; const handleAddToCurrentOrder = ()=>{ setCurrentOrder([ ...currentOrder, { product: selectedProduct, quantity: quantity, status: 'Processing' } ]); setSelectedProduct(''); setQuantity(1); }; const handlePaymentMethodChange = (method)=>{ setPaymentMethod(method); }; const handleCheckout = ()=>{ setOrdersHistory([ ...ordersHistory, ...currentOrder.map((order)=>({ ...order, status: 'Completed' })) ]); setCurrentOrder([]); setShowPromotion(true); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", style: { animation: showPromotion ? "fadeIn 1s" : "" }, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#f8f9fa] p-4 shadow-md", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center text-[#343a40]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Online Printing House")), /*#__PURE__*/ React.createElement("main", { className: "mt-4 px-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Product Category 1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Select your printing options."), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleSelectProduct('Product Category 1'), __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Select")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Product Category 2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Customize products to your needs."), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleSelectProduct('Product Category 2'), __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Select")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Product Category 3"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Browse various printing materials."), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleSelectProduct('Product Category 3'), __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Select"))), selectedProduct && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Selected Product: ", selectedProduct), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Quantity:"), /*#__PURE__*/ React.createElement("input", { type: "number", value: quantity, onChange: handleQuantityChange, className: "border-2 border-gray-200 rounded-md p-2", name: "quantity", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleAddToCurrentOrder, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Add to Order")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Your Orders"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs uppercase bg-gray-50", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "Status"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, currentOrder.map((order, index)=>/*#__PURE__*/ React.createElement("tr", { className: "bg-white border-b", key: index, __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, order.product), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, order.quantity), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, order.status))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Payment Options"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4", onClick: ()=>handlePaymentMethodChange('Credit Card'), __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Credit Card"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>handlePaymentMethodChange('PayPal'), __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "PayPal"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded", onClick: handleCheckout, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Checkout"))), showPromotion && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-green-100 border-l-4 border-green-500 text-green-700 p-4", role: "alert", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Promotions"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Thanks for your order! Check out our latest promotions and save on your next purchase!"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#f8f9fa] mt-8 p-4 text-center", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#343a40]", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "© 2023 Online Printing House. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }