function MainComponent() { const [cart, setCart] = React.useState([]); const [selectedSign, setSelectedSign] = React.useState(null); const [products, setProducts] = React.useState({}); const [productTypes, setProductTypes] = React.useState([ "T-Shirt", "Hoodie", "Mug", "Poster" ]); const [currentImageIndex, setCurrentImageIndex] = React.useState({}); const [selectedSizes, setSelectedSizes] = React.useState({}); // Track selected sizes for each product const [expandedProduct, setExpandedProduct] = React.useState(null); // Track which product is expanded const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); // Load cart from localStorage on component mount React.useEffect(()=>{ const savedCart = localStorage.getItem("numun-cart"); if (savedCart) { try { setCart(JSON.parse(savedCart)); } catch (error) { console.error("Error loading cart:", error); setCart([]); } } }, []); // Save cart to localStorage whenever cart changes React.useEffect(()=>{ if (cart.length > 0) { localStorage.setItem("numun-cart", JSON.stringify(cart)); } else { localStorage.removeItem("numun-cart"); } }, [ cart ]); const zodiacSigns = [ { name: "Aries", symbol: "♈", dates: "Mar 21 - Apr 19", element: "Fire" }, { name: "Taurus", symbol: "♉", dates: "Apr 20 - May 20", element: "Earth" }, { name: "Gemini", symbol: "♊", dates: "May 21 - Jun 20", element: "Air" }, { name: "Cancer", symbol: "♋", dates: "Jun 21 - Jul 22", element: "Water" }, { name: "Leo", symbol: "♌", dates: "Jul 23 - Aug 22", element: "Fire" }, { name: "Virgo", symbol: "♍", dates: "Aug 23 - Sep 22", element: "Earth" }, { name: "Libra", symbol: "♎", dates: "Sep 23 - Oct 22", element: "Air" }, { name: "Scorpio", symbol: "♏", dates: "Oct 23 - Nov 21", element: "Water" }, { name: "Sagittarius", symbol: "♐", dates: "Nov 22 - Dec 21", element: "Fire" }, { name: "Capricorn", symbol: "♑", dates: "Dec 22 - Jan 19", element: "Earth" }, { name: "Aquarius", symbol: "♒", dates: "Jan 20 - Feb 18", element: "Air" }, { name: "Pisces", symbol: "♓", dates: "Feb 19 - Mar 20", element: "Water" } ]; // Load products from database instead of localStorage React.useEffect(()=>{ const loadProducts = async ()=>{ try { setLoading(true); const response = await fetch("/api/products", { method: "POST" }); if (!response.ok) { throw new Error(`Failed to load products: ${response.status}`); } const data = await response.json(); if (data.success) { setProducts(data.products || {}); setProductTypes(data.productTypes || [ "T-Shirt", "Hoodie", "Mug", "Poster" ]); } else { throw new Error(data.error || "Failed to load products"); } } catch (error) { console.error("Error loading products:", error); setError("Failed to load products. Please try again."); } finally{ setLoading(false); } }; loadProducts(); }, []); const getProductData = (sign, productType)=>{ return products[sign]?.[productType] || null; }; // Helper function to get selected size for a product const getSelectedSize = (sign, productType)=>{ const key = `${sign}-${productType}`; return selectedSizes[key] || null; }; // Helper function to set selected size for a product const setSelectedSize = (sign, productType, size)=>{ const key = `${sign}-${productType}`; setSelectedSizes((prev)=>({ ...prev, [key]: size })); }; // Helper function to check if product is expanded const isProductExpanded = (sign, productType)=>{ return expandedProduct === `${sign}-${productType}`; }; // Helper function to toggle product expansion const toggleProductExpansion = (sign, productType)=>{ const key = `${sign}-${productType}`; setExpandedProduct(expandedProduct === key ? null : key); }; const addToCart = (sign, product, size = null)=>{ const item = { id: Date.now(), sign: sign, product: product.type, price: parseFloat(product.price), size: size, quantity: 1 }; setCart([ ...cart, item ]); // Clear selected size after adding to cart setSelectedSize(sign, product.type, null); }; const removeFromCart = (itemId)=>{ setCart(cart.filter((item)=>item.id !== itemId)); }; const cartTotal = cart.reduce((total, item)=>total + item.price * (item.quantity || 1), 0); // Helper function to get current image index for a product const getCurrentImageIndex = (sign, productType)=>{ const key = `${sign}-${productType}`; return currentImageIndex[key] || 0; }; // Helper function to set current image index for a product const setCurrentImageIndexForProduct = (sign, productType, index)=>{ const key = `${sign}-${productType}`; setCurrentImageIndex((prev)=>({ ...prev, [key]: index })); }; // Helper function to navigate images const navigateImage = (sign, productType, direction, totalImages)=>{ const currentIndex = getCurrentImageIndex(sign, productType); let newIndex; if (direction === "next") { newIndex = currentIndex >= totalImages - 1 ? 0 : currentIndex + 1; } else { newIndex = currentIndex <= 0 ? totalImages - 1 : currentIndex - 1; } setCurrentImageIndexForProduct(sign, productType, newIndex); }; // Show loading state if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black text-white font-inter flex items-center justify-center", __source: { fileName: "", lineNumber: 205, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, "✦"), /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, "Loading cosmic collection..."))); } // Show error state if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black text-white font-inter flex items-center justify-center", __source: { fileName: "", lineNumber: 217, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4 text-red-400", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, "⚠"), /*#__PURE__*/ React.createElement("div", { className: "text-xl text-red-400 mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded-lg", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, "Try Again"))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black text-white font-inter", __source: { fileName: "", lineNumber: 233, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-black border-b border-gray-800 sticky top-0 z-50", __source: { fileName: "", lineNumber: 234, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-6", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/fd9c7ede-c75c-47c5-820a-bdff84e8b919/-/format/auto/", alt: "Numun Logo", className: "h-32 w-auto", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-gray-400", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, "✦"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-white font-bold text-xl", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, "NEW MOON")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "relative", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart text-xl", __source: { fileName: "", lineNumber: 250, columnNumber: 17 }, __self: this }), cart.length > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-2 -right-2 bg-purple-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center", __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }, cart.length)))))), /*#__PURE__*/ React.createElement("section", { className: "relative py-20 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 262, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }, "Cosmic Style"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 267, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/303406ae-bb1c-4042-be99-5cd06b217e05/-/format/auto/", alt: "New Moon", className: "w-32 h-32 object-contain", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-gray-300 mb-8", __source: { fileName: "", lineNumber: 274, columnNumber: 11 }, __self: this }, "Discover your celestial identity with our mystical zodiac collection"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 text-2xl mb-4 md:mb-0", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, "✦"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, "✧"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, "✦")))), /*#__PURE__*/ React.createElement("section", { className: "py-8 md:py-16 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 285, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 286, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 287, columnNumber: 11 }, __self: this }, "Choose Your Sign"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-6 mb-16", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, zodiacSigns.map((sign)=>/*#__PURE__*/ React.createElement("button", { key: sign.name, onClick: ()=>setSelectedSign(selectedSign === sign.name ? null : sign.name), className: `p-6 rounded-lg border-2 transition-all duration-300 hover:scale-105 ${selectedSign === sign.name ? "border-purple-500 bg-purple-900/20" : "border-gray-700 hover:border-gray-500"}`, __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, sign.symbol), /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, sign.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, sign.dates), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, sign.element)))), selectedSign && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/50 rounded-lg p-4 md:p-8 mb-16", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-2xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }, selectedSign, " Collection"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6", __source: { fileName: "", lineNumber: 317, columnNumber: 15 }, __self: this }, productTypes.map((productType)=>{ const productData = getProductData(selectedSign, productType); const currentSign = zodiacSigns.find((s)=>s.name === selectedSign); // Only show products that have been set up in admin if (!productData || !productData.price || productData.price === "" || productData.price === "0") { return null; } const currentIndex = getCurrentImageIndex(selectedSign, productType); const images = productData.images || []; const currentImage = images[currentIndex]; const availableSizes = productData.sizes || []; const selectedSize = getSelectedSize(selectedSign, productType); const requiresSize = availableSizes.length > 0; const isExpanded = isProductExpanded(selectedSign, productType); return /*#__PURE__*/ React.createElement("div", { key: productType, className: "bg-gray-800/50 rounded-lg border border-gray-700 overflow-hidden transition-all duration-300", __source: { fileName: "", lineNumber: 352, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 cursor-pointer hover:bg-gray-800/70 transition-colors", onClick: ()=>toggleProductExpansion(selectedSign, productType), __source: { fileName: "", lineNumber: 357, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative mb-4", __source: { fileName: "", lineNumber: 363, columnNumber: 25 }, __self: this }, currentImage ? /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 365, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentImage, alt: `${selectedSign} ${productType}`, className: "w-full h-48 object-cover rounded-lg", __source: { fileName: "", lineNumber: 366, columnNumber: 31 }, __self: this }), images.length > 1 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); navigateImage(selectedSign, productType, "prev", images.length); }, className: "absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full w-8 h-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 373, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-sm", __source: { fileName: "", lineNumber: 385, columnNumber: 37 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); navigateImage(selectedSign, productType, "next", images.length); }, className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full w-8 h-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 387, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-sm", __source: { fileName: "", lineNumber: 399, columnNumber: 37 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-1", __source: { fileName: "", lineNumber: 401, columnNumber: 35 }, __self: this }, images.map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: (e)=>{ e.stopPropagation(); setCurrentImageIndexForProduct(selectedSign, productType, index); }, className: `w-2 h-2 rounded-full ${index === currentIndex ? "bg-white" : "bg-white/50"}`, __source: { fileName: "", lineNumber: 403, columnNumber: 39 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-48 bg-gray-700 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 425, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-400", __source: { fileName: "", lineNumber: 426, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 427, columnNumber: 33 }, __self: this }, currentSign.symbol), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 430, columnNumber: 33 }, __self: this }, "No image")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-2", __source: { fileName: "", lineNumber: 436, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 437, columnNumber: 27 }, __self: this }, selectedSign, " ", productType), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-400", __source: { fileName: "", lineNumber: 440, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${isExpanded ? "up" : "down"} text-sm`, __source: { fileName: "", lineNumber: 441, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-purple-400 mb-2", __source: { fileName: "", lineNumber: 447, columnNumber: 25 }, __self: this }, "$", productData.price), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 451, columnNumber: 25 }, __self: this }, "Click to ", isExpanded ? "collapse" : "expand", " details")), isExpanded && /*#__PURE__*/ React.createElement("div", { className: "px-4 pb-4 border-t border-gray-700", __source: { fileName: "", lineNumber: 458, columnNumber: 25 }, __self: this }, productData.description && /*#__PURE__*/ React.createElement("div", { className: "mb-4 pt-4", __source: { fileName: "", lineNumber: 461, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("h6", { className: "font-semibold mb-2 text-purple-300", __source: { fileName: "", lineNumber: 462, columnNumber: 31 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-300 leading-relaxed", __source: { fileName: "", lineNumber: 465, columnNumber: 31 }, __self: this }, productData.description)), requiresSize && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 473, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2 text-purple-300", __source: { fileName: "", lineNumber: 474, columnNumber: 31 }, __self: this }, "Select Size:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 477, columnNumber: 31 }, __self: this }, availableSizes.map((size)=>/*#__PURE__*/ React.createElement("button", { key: size, onClick: ()=>setSelectedSize(selectedSign, productType, size), className: `px-3 py-1 rounded text-sm border transition-colors ${selectedSize === size ? "bg-purple-600 border-purple-600 text-white" : "border-gray-600 text-gray-300 hover:border-gray-500"}`, __source: { fileName: "", lineNumber: 479, columnNumber: 35 }, __self: this }, size)))), productData.inventory !== undefined && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 503, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 504, columnNumber: 31 }, __self: this }, productData.inventory > 0 ? `${productData.inventory} in stock` : "Out of stock")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(selectedSign, { type: productType, price: productData.price }, selectedSize), disabled: requiresSize && !selectedSize, className: "w-full bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 513, columnNumber: 27 }, __self: this }, requiresSize && !selectedSize ? "Select Size First" : "Add to Cart"))); })), productTypes.every((productType)=>{ const productData = getProductData(selectedSign, productType); return !productData || !productData.price || productData.price === "" || productData.price === "0"; }) && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-400 py-8", __source: { fileName: "", lineNumber: 547, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 548, columnNumber: 19 }, __self: this }, "✦"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 549, columnNumber: 19 }, __self: this }, "No products available for ", selectedSign, " yet."), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 552, columnNumber: 19 }, __self: this }, "Check back soon for cosmic merchandise!"))))), cart.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-gray-900 border border-gray-700 rounded-lg p-4 max-w-sm", __source: { fileName: "", lineNumber: 563, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 564, columnNumber: 11 }, __self: this }, "Cart (", cart.length, " items)"), /*#__PURE__*/ React.createElement("div", { className: "max-h-32 overflow-y-auto mb-2", __source: { fileName: "", lineNumber: 565, columnNumber: 11 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex justify-between items-center text-sm mb-1", __source: { fileName: "", lineNumber: 567, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 571, columnNumber: 17 }, __self: this }, item.sign, " ", item.product, item.size && /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 574, columnNumber: 21 }, __self: this }, " (", item.size, ")")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 577, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 578, columnNumber: 19 }, __self: this }, "$", item.price), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeFromCart(item.id), className: "text-red-400 hover:text-red-300", __source: { fileName: "", lineNumber: 579, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 583, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 pt-2", __source: { fileName: "", lineNumber: 589, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between font-bold", __source: { fileName: "", lineNumber: 590, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 591, columnNumber: 15 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 592, columnNumber: 15 }, __self: this }, "$", cartTotal.toFixed(2))), /*#__PURE__*/ React.createElement("a", { href: "/checkout", className: "w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition-colors block text-center", __source: { fileName: "", lineNumber: 594, columnNumber: 13 }, __self: this }, "Checkout")))); }