function Cart1() { const [cartItems, setCartItems] = useState([ { id: 1, name: "Wireless Mouse", price: 29.99, quantity: 2, image: "/mouse.jpg" }, { id: 2, name: "Mechanical Keyboard", price: 89.99, quantity: 1, image: "/keyboard.jpg" }, { id: 3, name: "Gaming Headset", price: 59.99, quantity: 1, image: "/headset.jpg" } ]); const updateQuantity = (id, newQuantity)=>{ if (newQuantity < 1) return; setCartItems(cartItems.map((item)=>item.id === id ? { ...item, quantity: newQuantity } : item)); }; const removeItem = (id)=>{ setCartItems(cartItems.filter((item)=>item.id !== id)); }; const total = cartItems.reduce((sum, item)=>sum + item.price * item.quantity, 0); return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Shopping Cart"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, cartItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex items-center p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `Product: ${item.name}`, className: "w-[100px] h-[100px] object-cover rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow ml-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "$", item.price.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateQuantity(item.id, item.quantity - 1), className: "px-3 py-1 bg-gray-200 rounded-l hover:bg-gray-300", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-1 bg-gray-100", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, item.quantity), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateQuantity(item.id, item.quantity + 1), className: "px-3 py-1 bg-gray-200 rounded-r hover:bg-gray-300", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "+")), /*#__PURE__*/ React.createElement("div", { className: "ml-8 w-24 text-right", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "$", (item.price * item.quantity).toFixed(2)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeItem(item.id), className: "ml-4 text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex justify-end items-center border-t border-gray-200", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Total: $", total.toFixed(2)), /*#__PURE__*/ React.createElement("button", { className: "ml-8 px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Checkout")))); } function Cart1Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Cart1, { __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this })); } function MenuItem({ image, name, price, onAddToCart }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Delicious ${name}`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#2b2b2b]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "$", price.toFixed(2)), /*#__PURE__*/ React.createElement("button", { onClick: onAddToCart, className: "mt-3 bg-[#ff4d4d] hover:bg-[#ff3333] text-white font-roboto py-2 px-4 rounded-full inline-block", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart mr-2", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), "Add to Cart"))); } function MenuItemStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MenuItem, { image: "/pizza.jpg", name: "Margherita Pizza", price: 12.99, onAddToCart: ()=>alert("Added to cart!"), __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MenuItem, { image: "/burger.jpg", name: "Classic Burger", price: 8.99, onAddToCart: ()=>alert("Added to cart!"), __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MenuItem, { image: "/salad.jpg", name: "Caesar Salad", price: 6.99, onAddToCart: ()=>alert("Added to cart!"), __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function MainComponent() { const [cartItems, setCartItems] = useState([]); const addToCart = (item)=>{ setCartItems([ ...cartItems, item ]); }; const menuItems = [ { id: 1, name: "Margherita Pizza", price: 12.99, image: "/pizza.jpg" }, { id: 2, name: "Chicken Burger", price: 8.99, image: "/burger.jpg" }, { id: 3, name: "Caesar Salad", price: 7.99, image: "/salad.jpg" }, { id: 4, name: "Pasta Alfredo", price: 11.99, image: "/pasta.jpg" }, { id: 5, name: "Fish & Chips", price: 13.99, image: "/fish.jpg" }, { id: 6, name: "Sushi Roll", price: 14.99, image: "/sushi.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#2b2b2b]", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Food Ordering"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-[#2b2b2b]", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "+1 234 567 8900")))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto mt-8 flex flex-col md:flex-row gap-8 p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Our Menu"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[350px]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))); }