function MainComponent() { const [images, setImages] = React.useState([]); React.useEffect(()=>{ async function fetchImages() { const prompts = [ "beautiful beach sunset, crystal clear water", "busy streets of Tokyo at night", "calm and peaceful mountain landscape" ]; const imageFetches = prompts.map((prompt)=>fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }).then((response)=>response.json())); const imageResponses = await Promise.all(imageFetches); const fetchedImages = imageResponses.map((response)=>response.data[0]); setImages(fetchedImages); } fetchImages(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFFFFF] shadow p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-3xl font-bold font-crimson-text text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Travelogue 🌍")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-crimson-text text-[#121212] mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Explore Generated Destinations"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Generated destination image ${index + 1}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, "Destination ", index + 1), /*#__PURE__*/ React.createElement("p", { className: "text-[#555] mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, "Explore this breathtaking destination, generated by AI.")))))))); }