function MainComponent() { const [menuItems, setMenuItems] = React.useState([ { id: 1, name: 'Tacos', price: 9.99 }, { id: 2, name: 'Burgers', price: 11.99 }, { id: 3, name: 'Pizza', price: 14.99 } ]); const [cart, setCart] = React.useState([]); const addToCart = (menuItem)=>{ setCart([ ...cart, menuItem ]); }; const totalPrice = cart.reduce((total, item)=>total + item.price, 0).toFixed(2); const handleCheckout = ()=>{ alert(`Total amount due: $${totalPrice}. Thanks for your order!`); setCart([]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-md", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-7", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center py-4 px-2", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Food Delivery Logo", className: "h-8 w-8 mr-2", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-gray-500 text-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "FoodApp")))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-1", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/menu", className: "py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "outline-none mobile-menu-button", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6 text-gray-500 hover:text-green-500", "x-show": "!showMenu", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M4 6h16M4 12h16M4 18h16", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }))))))), /*#__PURE__*/ React.createElement("main", { className: "my-10", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center text-gray-700 mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex justify-between items-center mt-6", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/menu/${item.name.toLowerCase()}.png`, alt: `${item.name}`, className: "h-16 w-16 object-cover", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg ml-4", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, "$", item.price), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-3 py-2 rounded shadow", onClick: ()=>addToCart(item), __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "Add to Cart"))))), cart.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 shadow-md mt-10", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center text-gray-700 mb-8", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Your Cart"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center mt-6", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/menu/${item.name.toLowerCase()}.png`, alt: `${item.name} in cart`, className: "h-16 w-16 object-cover", __source: { fileName: "", lineNumber: 94, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg ml-4", __source: { fileName: "", lineNumber: 95, columnNumber: 23 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, "$", item.price))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-6 font-semibold text-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "$", totalPrice)), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-3 py-2 rounded shadow", onClick: handleCheckout, __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, "Checkout"))))))); }