function MainComponent() { const [items, setItems] = React.useState([ { id: 1, name: "Print of a majestic eagle in flight", price: "20.00", quantity: 1, imageUrl: "", searchUrl: "", description: "" }, { id: 2, name: "Poster of futuristic cities at sunset", price: "10.00", quantity: 1, imageUrl: "", searchUrl: "", description: "" }, { id: 3, name: "T-shirt with an abstract geometric pattern", price: "15.00", quantity: 1, imageUrl: "", searchUrl: "", description: "" } ]); const [loading, setLoading] = React.useState(false); const fetchItemData = async (item)=>{ const stableDiffusionResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(item.name)}&batch_size=1`); const stableDiffusionData = await stableDiffusionResponse.json(); const imageSearchResponse = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(item.name)}`); const imageSearchData = await imageSearchResponse.json(); const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": item.name } ], system_prompt: 'Explain this content' }), headers: { 'Content-Type': 'application/json' } }); const chatGptData = await chatGptResponse.json(); return { imageUrl: stableDiffusionData.data[0] || imageSearchData.items[0].thumbnailImageUrl, searchUrl: imageSearchData.items[0].link, description: chatGptData.result }; }; const fetchItemsData = async ()=>{ setLoading(true); const fetchDataPromises = items.map((item)=>fetchItemData(item)); Promise.all(fetchDataPromises).then((results)=>{ setItems(items.map((item, index)=>({ ...item, ...results[index] }))); }).catch((error)=>{ console.error("Error fetching data:", error); }).finally(()=>{ setLoading(false); }); }; React.useEffect(()=>{ fetchItemsData(); }, []); const handleQuantityChange = (itemId, newQuantity)=>{ setItems((currentItems)=>currentItems.map((item)=>item.id === itemId ? { ...item, quantity: newQuantity } : item)); }; const incrementQuantity = (itemId)=>{ handleQuantityChange(itemId, items.find((item)=>item.id === itemId).quantity + 1); }; const decrementQuantity = (itemId)=>{ handleQuantityChange(itemId, Math.max(items.find((item)=>item.id === itemId).quantity - 1, 1)); }; const totalPrice = items.reduce((total, item)=>{ return total + parseFloat(item.price) * item.quantity; }, 0).toFixed(2); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5] font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-[#121212] mb-8", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, "Merch Store"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl p-6 bg-white shadow-md", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block w-8 h-8 border-4 border-[#121212] border-t-transparent animate-spin rounded-full", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-500", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Loading merchandise...")) : items.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex flex-wrap items-center justify-between md:flex-nowrap", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imageUrl, alt: `Merchandise image for ${item.name}`, className: "w-[100px] h-[100px] object-cover mr-4", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212]", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 21 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, "$", item.price))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-4 md:flex-row md:mt-0", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-3 md:mb-0 md:mr-3", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>decrementQuantity(item.id), className: "px-2 bg-gray-200", __source: { fileName: "", lineNumber: 104, columnNumber: 21 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("input", { type: "text", readOnly: true, name: `quantity-${item.id}`, value: item.quantity, onChange: (e)=>handleQuantityChange(item.id, +e.target.value), className: "w-16 p-2 border-2 border-gray-300 rounded-md text-center mx-1", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>incrementQuantity(item.id), className: "px-2 bg-gray-200", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }, "+")), /*#__PURE__*/ React.createElement("a", { href: item.searchUrl, target: "_blank", rel: "noopener noreferrer", className: "text-[#1a0dab] hover:underline", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, "Find more info"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-[#121212]", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Total: $", totalPrice), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 mt-4 bg-[#4caf50] text-white rounded-md disabled:bg-gray-300", disabled: loading, __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "Checkout"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, ` @keyframes spin { to { transform: rotate(360deg); } } `)); }

Merch Store

Print of a majestic eagle in flight

Poster of futuristic cities at sunset

T-shirt with an abstract geometric pattern

Total: $45.00