function MainComponent({ outfitImage, generateOutfit }) { const optionsTops = [ "T-shirt", "Blouse", "Sweater", "Tank top", "Hoodie", "Jacket", "V-neck", "Dress shirt", "Crop top", "Polo" ]; const optionsPants = [ "Jeans", "Shorts", "Skirt", "Leggings", "Chinos", "Cargo Pants", "Sweatpants", "Slacks", "Capris", "Joggers" ]; const optionsShoes = [ "Sneakers", "Boots", "Sandals", "Heels", "Loafers", "Flats", "Slippers", "Brogues", "Espadrilles", "Moccasins" ]; const colors = [ "Red", "Blue", "Green", "Black", "Yellow", "White", "Pink", "Purple", "Orange", "Brown" ]; const moods = [ "Casual", "Sporty", "Formal", "Vintage", "Bohemian", "Elegant", "Edgy", "Chic", "Artsy", "Preppy" ]; const handleGenerateOutfit = ()=>{ const top = document.querySelector('select[name="tops"]').value; const pants = document.querySelector('select[name="pants"]').value; const shoes = document.querySelector('select[name="shoes"]').value; const color = document.querySelector('select[name="colors"]').value; const mood = document.querySelector('select[name="mood"]').value; generateOutfit({ top, pants, shoes, color, mood }); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-hidden", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c6a929ad-b6e4-4d88-a465-7fbe7ef59a48/-/format/auto/", alt: "Fashion background filling the entire screen", className: "absolute w-full h-full object-cover", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[60%] left-1/2 transform -translate-x-[50%] flex flex-col space-y-2 w-[160px] bg-white bg-opacity-75 p-4 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "tops", className: "block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, optionsTops.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 22, columnNumber: 40 }, __self: this }, option))), /*#__PURE__*/ React.createElement("select", { name: "pants", className: "block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, optionsPants.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 25, columnNumber: 41 }, __self: this }, option))), /*#__PURE__*/ React.createElement("select", { name: "shoes", className: "block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, optionsShoes.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 28, columnNumber: 41 }, __self: this }, option))), /*#__PURE__*/ React.createElement("select", { name: "colors", className: "block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, colors.map((color)=>/*#__PURE__*/ React.createElement("option", { key: color, value: color, __source: { fileName: "", lineNumber: 31, columnNumber: 34 }, __self: this }, color))), /*#__PURE__*/ React.createElement("select", { name: "mood", className: "block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, moods.map((mood)=>/*#__PURE__*/ React.createElement("option", { key: mood, value: mood, __source: { fileName: "", lineNumber: 34, columnNumber: 32 }, __self: this }, mood))), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateOutfit, className: "p-2 bg-pink-500 text-white rounded-md", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Generate Outfit")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[52%] left-1/2 transform translate-x-[20%] p-6 bg-pink-500 text-white w-[240px] h-[340px] flex flex-col items-center rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Your New Fit"), outfitImage && /*#__PURE__*/ React.createElement("img", { src: outfitImage, alt: "Generated Outfit", className: "w-full h-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 25 }, __self: this }))); } function StoryComponent() { const [outfitImage, setOutfitImage] = React.useState(""); const generateOutfit = ({ top, pants, shoes, color, mood })=>{ const prompt = `A ${mood} outfit with a ${color} ${top}, ${pants}, and ${shoes}`; fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>setOutfitImage(data.data[0])); }; return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { outfitImage: outfitImage, generateOutfit: generateOutfit, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); }