function MainComponent() { const [items, setItems] = React.useState([]); const [loadingImage, setLoadingImage] = React.useState(true); React.useEffect(()=>{ async function fetchImages() { try { setLoadingImage(true); const responses = await Promise.all([ fetch('/integrations/stable-diffusion/?prompt=Handcrafted+Silk+Dress,+elegant,+luxury&batch_size=1', { method: 'GET' }), fetch('/integrations/stable-diffusion/?prompt=Exclusive+Leather+Jacket,+upscale,+fashion&batch_size=1', { method: 'GET' }), fetch('/integrations/stable-diffusion/?prompt=Designer+Velvet+Suit,+high-fashion,+opulent&batch_size=1', { method: 'GET' }) ]); const imageData = await Promise.all(responses.map((response)=>response.json())); setItems([ { id: 1, title: 'Handcrafted Silk Dress', price: '899.99', imageUrl: imageData[0].data[0] }, { id: 2, title: 'Exclusive Leather Jacket', price: '1299.50', imageUrl: imageData[1].data[0] }, { id: 3, title: 'Designer Velvet Suit', price: '2349.00', imageUrl: imageData[2].data[0] } ]); } catch (error) { console.error('Fetching images failed:', error); } finally{ setLoadingImage(false); } } fetchImages(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-white", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full px-6 py-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold font-roboto text-black text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "LuxCloth")), /*#__PURE__*/ React.createElement("main", { className: "w-full px-6", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 py-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex flex-col items-center bg-gray-50 p-4 border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, loadingImage ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse w-full h-[360px] bg-gray-300 rounded-t-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { className: "w-full h-[360px] object-cover rounded-t-lg", src: item.imageUrl, alt: `${item.title}`, __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-4 pb-2 text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-gray-600", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "$ ", item.price), /*#__PURE__*/ React.createElement("button", { className: "w-full mt-4 bg-black text-white py-2 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Add to Cart")))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full flex justify-center items-center h-16 bg-gray-100 mt-6", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "© 2023 LuxCloth Boutique"))); }