function MainComponent() { const [products, setProducts] = React.useState([ { id: 1, name: 'Blue Cotton T-Shirt', description: 'Soft cotton t-shirt perfect for every day', price: '$19.99', imageUrl: '/images/shirt1.jpg' }, { id: 2, name: 'Casual White Shirt', description: 'Crisp white shirt for all occasions', price: '$29.99', imageUrl: '/images/shirt2.jpg' }, { id: 3, name: 'Plaid Button-up Shirt', description: 'Comfortable plaid shirt for a casual look', price: '$24.99', imageUrl: '/images/shirt3.jpg' }, { id: 4, name: 'Graphic Tee', description: 'Express yourself with this vibrant graphic tee', price: '$14.99', imageUrl: '/images/shirt4.jpg' }, { id: 5, name: 'Classic Denim Jacket', description: 'Timeless denim for any season', price: '$49.99', imageUrl: '/images/jacket1.jpg' }, { id: 6, name: 'Leather Jacket', description: 'Edgy and stylish', price: '$89.99', imageUrl: '/images/jacket2.jpg' }, { id: 7, name: 'Black Chinos', description: 'Versatile and modern', price: '$39.99', imageUrl: '/images/pants1.jpg' }, { id: 8, name: 'Summer Shorts', description: 'Stay cool in these casual shorts', price: '$19.99', imageUrl: '/images/shorts1.jpg' } ]); const [cart, setCart] = React.useState([]); const [loading, setLoading] = React.useState(false); const [chatGptResponse, setChatGptResponse] = React.useState(''); const handleAddToCart = (product)=>{ // Check if product already exists in cart if (cart.some((item)=>item.id === product.id)) { // Update product quantity if it exists const updatedCart = cart.map((item)=>item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item); setCart(updatedCart); } else { // Add product to cart if it doesn't exist setCart([ ...cart, { ...product, quantity: 1 } ]); } }; const getChatGptResponse = ()=>{ setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: { messages: cart.map((product)=>({ role: 'user', content: `Add one ${product.name} to cart.` })), system_prompt: 'Process these items', max_tokens: 2000 } }).then((response)=>response.json()).then((data)=>{ setLoading(false); if (data.status) { setChatGptResponse(data.result); } }).catch(()=>{ setLoading(false); }); }; React.useEffect(()=>{ if (cart.length > 0) { getChatGptResponse(); } }, [ cart ]); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col min-h-screen bg-[#f7f7f7] text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Clothing Store"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart text-lg mr-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, cart.length))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "max-w-sm bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imageUrl, alt: `Buy ${product.name}`, className: "w-full h-60 object-cover", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-3", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddToCart(product), className: "px-4 py-2 bg-[#004225] text-white rounded hover:bg-[#003214] transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "Add to Cart")))))), loading && /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-white shadow-inner", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "© 2023 Clothing Store")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } html { scroll-behavior: smooth; } `)); }