function MainComponent() { const [cart, setCart] = React.useState([]); const [showCart, setShowCart] = React.useState(false); const [checkout, setCheckout] = React.useState(false); const [deliveryOption, setDeliveryOption] = React.useState(""); const [paymentOption, setPaymentOption] = React.useState(""); const products = [ { id: 1, name: "Sausage 1", description: "Delicious and flavorful", image: "path/to/sausage1.jpg" }, { id: 2, name: "Sausage 2", description: "A classic choice", image: "path/to/sausage2.jpg" }, { id: 3, name: "Mustard", description: "Perfect with any sausage", image: "path/to/mustard.jpg" }, { id: 4, name: "Bread", description: "Freshly baked every day", image: "path/to/bread.jpg" } ]; const addToCart = (product)=>{ setCart([ ...cart, product ]); }; const navigateToCart = ()=>{ setShowCart(true); }; const navigateToMainPage = ()=>{ setShowCart(false); setCheckout(false); }; const proceedToCheckout = ()=>{ setCheckout(true); }; const handleDeliveryChange = (event)=>{ setDeliveryOption(event.target.value); }; const handlePaymentChange = (event)=>{ setPaymentOption(event.target.value); }; const placeOrder = (event)=>{ event.preventDefault(); alert("Order placed successfully!"); setCart([]); setCheckout(false); setShowCart(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#F9F9F9]", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 bg-[#FFFFFF] shadow-md", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-bold font-roboto text-xl sm:text-2xl", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Sausage World")), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center bg-[#EFEFEF] p-4 sticky top-0 z-10", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#333]", onClick: navigateToMainPage, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart", onClick: navigateToCart, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, cart.length))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, !showCart && !checkout && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white p-2 shadow rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name}`, className: "h-[150px] sm:h-[200px] w-full object-cover rounded-t", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFD700] p-2 w-full mt-2 rounded font-roboto", onClick: ()=>addToCart(product), __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Add to Cart"))))), showCart && !checkout && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Your Cart"), cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between mb-4 bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, item.description)), /*#__PURE__*/ React.createElement("button", { className: "text-[#FF6347] font-roboto", onClick: ()=>setCart(cart.filter((_, i)=>i !== index)), __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, "Remove"))), cart.length > 0 && /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-white p-3 w-full rounded font-roboto", onClick: proceedToCheckout, __source: { fileName: "", lineNumber: 89, columnNumber: 33 }, __self: this }, "Checkout")), checkout && /*#__PURE__*/ React.createElement("form", { onSubmit: placeOrder, className: "space-y-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold font-roboto text-xl", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Checkout"), /*#__PURE__*/ React.createElement("select", { className: "p-3 w-full rounded border", name: "delivery", value: deliveryOption, onChange: handleDeliveryChange, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Select Delivery Option"), /*#__PURE__*/ React.createElement("option", { value: "express", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "Express Delivery"), /*#__PURE__*/ React.createElement("option", { value: "standard", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "Standard Delivery")), /*#__PURE__*/ React.createElement("select", { className: "p-3 w-full rounded border", name: "payment", value: paymentOption, onChange: handlePaymentChange, __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "Select Payment Option"), /*#__PURE__*/ React.createElement("option", { value: "creditCard", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "Credit Card"), /*#__PURE__*/ React.createElement("option", { value: "paypal", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Paypal")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4CAF50] text-white p-3 w-full rounded font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Place Order"))), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#EFEFEF]", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "© 2023 Sausage World. All rights reserved."))); }