function MainComponent() { const [activeTab, setActiveTab] = React.useState('handbags'); const [cartItems, setCartItems] = React.useState([]); const handleTabClick = (tab)=>{ setActiveTab(tab); }; const addToCart = (item)=>{ setCartItems((prevItems)=>[ ...prevItems, item ]); }; const tabStyle = (tabName)=>`cursor-pointer px-3 py-2 rounded-md text-sm font-medium ${activeTab === tabName ? 'bg-[#FDB147] text-black' : 'text-[#877978]'}`; const products = { handbags: [ "Classic Leather Tote", "Sleek Daily Carry" ], watches: [ "Minimalist Wristwatch", "Elegant Timepiece" ], sunglasses: [ "Vintage Sunglass", "Modern Aviator" ], scarves: [ "Silk Scarf", "Wool Blend" ], jewelry: [ "Silver Necklace", "Gold Earings" ], hats: [ "Summer Straw Hat", "Winter Beanie" ], belts: [ "Leather Waist Belt", "Slim Buckle Belt" ], footwear: [ "Comfort Sneakers", "Stiletto Heels" ], bags: [ "Backpack", "Evening Clutch" ] }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen font-roboto", style: { backgroundColor: '#f6efe9', color: '#877978' }, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "py-4 px-8 flex justify-between items-center", style: { backgroundColor: '#ddbaa7' }, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Dror", /*#__PURE__*/ React.createElement("span", { className: "text-xl block", style: { color: '#dbcfd3' }, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Unveil your true essence with our accessories")), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: tabStyle('handbags'), onClick: ()=>handleTabClick('handbags'), __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Handbags"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('watches'), onClick: ()=>handleTabClick('watches'), __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Watches"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('sunglasses'), onClick: ()=>handleTabClick('sunglasses'), __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Sunglasses"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('scarves'), onClick: ()=>handleTabClick('scarves'), __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Scarves"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('jewelry'), onClick: ()=>handleTabClick('jewelry'), __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Jewelry"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('hats'), onClick: ()=>handleTabClick('hats'), __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Hats"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('belts'), onClick: ()=>handleTabClick('belts'), __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Belts"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('footwear'), onClick: ()=>handleTabClick('footwear'), __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Footwear"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('bags'), onClick: ()=>handleTabClick('bags'), __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Bags"), /*#__PURE__*/ React.createElement("li", { className: tabStyle('cart'), __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "cursor-pointer fas fa-shopping-cart", onClick: ()=>handleTabClick('cart'), __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), "(", cartItems.length, ")")))), /*#__PURE__*/ React.createElement("main", { className: `${[ 'handbags', 'watches', 'sunglasses', 'scarves', 'jewelry', 'hats', 'belts', 'footwear', 'bags' ].includes(activeTab) ? 'p-8' : ''} flex-grow relative`, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, products[activeTab]?.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "col-span-1 flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `images/${activeTab}/${product.replaceAll(' ', '_').toLowerCase()}.jpg`, alt: `${product} for ${activeTab}`, className: "w-full h-auto mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, product), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FDB147] text-black px-4 py-2 rounded shadow", onClick: ()=>addToCart(`${activeTab}: ${product}`), __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Add to Cart")))), activeTab === 'cart' && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: 'rgba(199, 138, 119, .75)' }, className: "absolute inset-0 flex justify-center items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f6efe9] text-black p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Cart Content", /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, cartItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, item))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` body { background-color: #f6efe9; color: #c2b5bd; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } main { animation: fadeIn 1s ease-in-out; } `)); }