function MainComponent() { const [productInfo, setProductInfo] = React.useState(null); const [loading, setLoading] = React.useState(true); const [currentPage, setCurrentPage] = React.useState('product'); const [addToCartLoading, setAddToCartLoading] = React.useState(false); const [quantity, setQuantity] = React.useState(1); React.useEffect(()=>{ if (currentPage === 'product') { setLoading(true); fetch('/products/screen-wipes').then((response)=>response.json()).then((data)=>{ setProductInfo(data); setLoading(false); }); } }, [ currentPage ]); function handlePageChange(page) { setCurrentPage(page); } function handleAddToCart() { setAddToCartLoading(true); setTimeout(()=>{ setAddToCartLoading(false); }, 1000); } function handleQuantityChange(event) { setQuantity(event.target.value); } const pageContent = ()=>{ switch(currentPage){ case 'product': if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 39, columnNumber: 18 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Loading product information...")); } return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 43, columnNumber: 16 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: productInfo.imageUrl, alt: "Unique phone screen cleaning wipes", className: "w-full max-w-md h-auto mx-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#121212] mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, productInfo.name), /*#__PURE__*/ React.createElement("p", { className: "text-md font-roboto text-[#666] mt-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, productInfo.description)); case 'addToCart': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-6", __source: { fileName: "", lineNumber: 49, columnNumber: 16 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", min: "1", className: "border border-[#ced4da] rounded-lg p-2 mb-3 text-center", value: quantity, onChange: handleQuantityChange, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 w-full max-w-xs text-center text-white bg-[#28a745] rounded-lg animate-pulse", onClick: handleAddToCart, disabled: addToCartLoading, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, addToCartLoading ? 'Adding...' : `Add to Cart - $${productInfo.price}`)); case 'aboutUs': return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 67, columnNumber: 16 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "text-md font-roboto text-[#666] mt-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "We are a dedicated team bringing unique and efficient solutions to keep your devices clean and hygienic. Our screen wipes are designed to offer a streak-free shine and are perfect for on-the-go use.")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between bg-[#f8f9fa] p-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-[#007bff] animate-bounce", onClick: ()=>handlePageChange('product'), __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-[#007bff]", onClick: ()=>handlePageChange('addToCart'), __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Add to Cart"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-[#007bff]", onClick: ()=>handlePageChange('aboutUs'), __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "About Us")), pageContent(), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); } 50% { transform: translateY(0); } } .container { animation: fadeIn 1s ease-in-out; } .animate-bounce { animation: bounce 1s infinite; } `)); }