function MainComponent() { const [currentPage, setCurrentPage] = React.useState('home'); const [loading, setLoading] = React.useState(false); const [price, setPrice] = React.useState(''); const [size, setSize] = React.useState(''); const [color, setColor] = React.useState(''); const [code, setCode] = React.useState(''); const generateDetails = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "system", content: "Generate price, size, and color for clothes." } ], system_prompt: 'Decide on the price, the size, and the color for an item in a shopping app called "Shonxi"', max_tokens: 200 }) }); if (response.ok) { const { result } = await response.json(); const details = result.split(', '); setPrice(details[0].split(': ')[1]); setSize(details[1].split(': ')[1]); setColor(details[2].split(': ')[1]); } } catch (error) { console.error('Error fetching details:', error); } finally{ setLoading(false); } }; React.useEffect(()=>{ generateDetails(); }, []); const handleBuyClick = (e)=>{ e.preventDefault(); setCurrentPage('buy'); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#00D1B2] p-4 text-white flex justify-between items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Shonxi"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mx-2 px-4 py-2 bg-white text-[#00D1B2] rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("button", { className: "mx-2 px-4 py-2 bg-white text-[#00D1B2] rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, "Log In"))), currentPage === 'home' && !loading && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border-2 border-gray-300 p-2 rounded w-full md:w-1/2", placeholder: "Search for cool clothes...", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mx-2 my-4 px-4 py-2 bg-[#007BFF] text-white rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#F012BE] text-white rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 21 }, __self: this }, "Filter"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mt-8", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded shadow p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/clothes1.jpg", alt: "Cool clothes image", className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 65, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 29 }, __self: this }, "Price: ", price), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 29 }, __self: this }, "Size: ", size), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 29 }, __self: this }, "Color: ", color), /*#__PURE__*/ React.createElement("button", { onClick: handleBuyClick, className: "mt-4 px-4 py-2 bg-[#FF4136] text-white rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 29 }, __self: this }, "Buy")))), currentPage === 'buy' && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, "Checkout"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 25 }, __self: this }, "Email or Phone Number"), /*#__PURE__*/ React.createElement("input", { className: "border-2 border-gray-300 p-2 rounded w-full", placeholder: "Enter your email or phone", name: "contact", __source: { fileName: "", lineNumber: 80, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 25 }, __self: this }, "Code"), /*#__PURE__*/ React.createElement("input", { className: "border-2 border-gray-300 p-2 rounded w-full", placeholder: "Enter the code sent to you", name: "verificationCode", __source: { fileName: "", lineNumber: 84, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2ECC40] text-white rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, "Complete Purchase"))); }