function FloatingCartPanel({ cart }) { const cartItems = cart.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-[#FFA500]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, item)); return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 p-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./images/cart.png", alt: "Large shopping cart icon", className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "ml-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, cartItems))); } function FloatingCartPanelStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FloatingCartPanel, { cart: [ 'Apple', 'Banana', 'Cherry' ], __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FloatingCartPanel, { cart: [ 'Item 1', 'Item 2' ], __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [cart, setCart] = React.useState([]); const [currentTab, setCurrentTab] = React.useState('home'); const addToCart = (item)=>setCart([ ...cart, item ]); const tabs = [ { key: 'home', label: 'Home', icon: 'fa-home' }, { key: 'menu', label: 'Menu', icon: 'fa-utensils' }, { key: 'about', label: 'About Us', icon: 'fa-info-circle' }, { key: 'contact', label: 'Contact Us', icon: 'fa-envelope' } ]; const pizzas = [ { name: 'Pepperoni Pizza', img: './images/pepperoni.png' }, { name: 'Cheese Pizza', img: './images/cheese.png' }, { name: 'Veg Pizza', img: './images/veg.png' } ]; const menuItems = [ { name: 'Salad', img: './images/salad.png' }, { name: 'Fries', img: './images/fries.png' }, { name: 'Dips', img: './images/dips.png' } ]; const TabContent = ()=>{ if (currentTab === 'menu') { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.img, alt: item.name, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl mt-2", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(item.name), className: "bg-[#FFA500] text-white px-4 py-2 mt-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Add to Cart")))); } else if (currentTab === 'about') { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 14 }, __self: this }, "About Us"); } else if (currentTab === 'contact') { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 14 }, __self: this }, "Contact Us"); } else { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, pizzas.map((pizza, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: pizza.img, alt: pizza.name, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#FFA500] mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, pizza.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(pizza.name), className: "bg-[#FFA500] text-white px-4 py-2 mt-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Add to Cart")))); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-full", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] bg-[#FFA500] text-white p-4 fixed top-0 left-0 h-full", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Pizza Hub"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, tabs.map((tab)=>/*#__PURE__*/ React.createElement("li", { key: tab.key, className: `cursor-pointer p-2 ${currentTab === tab.key ? 'bg-white text-[#FFA500]' : ''}`, onClick: ()=>setCurrentTab(tab.key), __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${tab.icon} mr-2`, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }), tab.label)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 ml-[200px]", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(TabContent, { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement(FloatingCartPanel, { cart: cart, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this })); }