function MainComponent() { const [selectedSize, setSelectedSize] = useState("M"); const [cartCount, setCartCount] = useState(0); const [currentIndex, setCurrentIndex] = useState(0); const shirts = [ { id: 1, name: "Klassikaline must T-särk", price: "29.99", image: "/shirt1.jpg", colors: [ "must", "valge", "hall" ], description: "Kvaliteetne 100% puuvillane t-särk igapäevaseks kandmiseks", stock: { S: 5, M: 8, L: 3, XL: 6 } }, { id: 2, name: "Valge põhisärk", price: "24.99", image: "/shirt2.jpg", colors: [ "valge", "beež" ], description: "Pehme ja hingav materjal sobib ideaalselt suveks", stock: { S: 3, M: 6, L: 4, XL: 2 } }, { id: 3, name: "Hall vabaajasärk", price: "27.99", image: "/shirt3.jpg", colors: [ "hall", "tumehall" ], description: "Moodne lõige ja vastupidav materjal", stock: { S: 7, M: 4, L: 8, XL: 5 } }, { id: 4, name: "Sinine triibuline särk", price: "32.99", image: "https://ucarecdn.com/22b7e001-865f-4db2-b3fe-28132cfaf332/-/format/auto/", colors: [ "sinine", "tumesinine" ], description: "Trendikas triibuline disain igaks puhuks", stock: { S: 4, M: 6, L: 5, XL: 3 } } ]; const nextShirt = ()=>{ setCurrentIndex((prev)=>(prev + 1) % shirts.length); setSelectedColor(shirts[(currentIndex + 1) % shirts.length].colors[0]); }; const prevShirt = ()=>{ setCurrentIndex((prev)=>(prev - 1 + shirts.length) % shirts.length); setSelectedColor(shirts[(currentIndex - 1 + shirts.length) % shirts.length].colors[0]); }; const addToCart = ()=>{ const newItem = { ...currentShirt, size: selectedSize, color: selectedColor }; setCart((prev)=>[ ...prev, newItem ]); setCartCount((prev)=>prev + 1); }; const currentShirt = shirts[currentIndex]; const [isCartOpen, setIsCartOpen] = useState(false); const [cart, setCart] = useState([]); const [selectedColor, setSelectedColor] = useState("must"); const [isZoomed, setIsZoomed] = useState(false); const totalPrice = cart.reduce((sum, item)=>sum + parseFloat(item.price), 0); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-6 border-b", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-light font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "T-Särgi Pood"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center cursor-pointer", onClick: ()=>setIsCartOpen(true), __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart text-xl", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 bg-black text-white rounded-full px-2 text-sm", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, cartCount))), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevShirt, className: "absolute left-0 top-1/2 -translate-y-1/2 bg-white p-4 rounded-full shadow-lg z-10", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center py-8", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentShirt.image, alt: `${currentShirt.name} t-särk eestvaates`, className: "w-full h-[500px] object-cover mb-8 cursor-zoom-in", onClick: ()=>setIsZoomed(true), __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 right-4 bg-white px-3 py-1 rounded-full shadow-md", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-plus", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-2", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, currentShirt.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, currentShirt.description), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, currentShirt.price, "€"), /*#__PURE__*/ React.createElement("div", { className: "w-64 space-y-4", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "Värv"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, currentShirt.colors.map((color)=>/*#__PURE__*/ React.createElement("button", { key: color, onClick: ()=>setSelectedColor(color), className: `w-8 h-8 rounded-full border-2 ${selectedColor === color ? "border-black" : "border-gray-200"}`, style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "Suurus"), /*#__PURE__*/ React.createElement("select", { value: selectedSize, onChange: (e)=>setSelectedSize(e.target.value), className: "w-full p-2 border rounded text-center", name: "size", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, Object.entries(currentShirt.stock).map(([size, count])=>/*#__PURE__*/ React.createElement("option", { key: size, value: size, disabled: count === 0, __source: { fileName: "", lineNumber: 167, columnNumber: 21 }, __self: this }, size, " ", count === 0 ? "(Läbi müüdud)" : `(${count} tk)`))))), /*#__PURE__*/ React.createElement("button", { onClick: addToCart, className: "w-64 bg-black text-white py-3 rounded hover:bg-gray-800 transition-colors font-roboto mt-6", disabled: currentShirt.stock[selectedSize] === 0, __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, currentShirt.stock[selectedSize] === 0 ? "Läbi müüdud" : "Lisa ostukorvi")), /*#__PURE__*/ React.createElement("button", { onClick: nextShirt, className: "absolute right-0 top-1/2 -translate-y-1/2 bg-white p-4 rounded-full shadow-lg z-10", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this })))), isCartOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed right-0 top-0 h-full w-80 bg-white shadow-lg p-4 z-20", __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "Ostukorv"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsCartOpen(false), __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }))), cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-4 border-b pb-2", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: item.name, className: "w-16 h-16 object-cover rounded", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-1", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, "Suurus: ", item.size), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, "Värv: ", item.color), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, item.price, "€")))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 221, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, "Kokku:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, totalPrice.toFixed(2), "€")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-black text-white py-3 rounded", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, "Mine maksma"))), isZoomed && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center", onClick: ()=>setIsZoomed(false), __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentShirt.image, alt: currentShirt.name, className: "max-h-[90vh] max-w-[90vw] object-contain", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }))); }