function MainComponent() { const [isLoading, setLoading] = React.useState(false); const [recipeData, setRecipeData] = React.useState({ name: '', ingredients: '', dietary: [], equipment: [], servingSize: 1 }); const [recipeOutput, setRecipeOutput] = React.useState(''); const [updateText, setUpdateText] = React.useState(''); const updateField = (e)=>{ const { name, value } = e.target; setRecipeData((prev)=>({ ...prev, [name]: value })); }; const handleUpdateTextChange = (e)=>{ setUpdateText(e.target.value); }; const handleMultiselectChange = (e)=>{ const { options } = e.target; const value = []; for (const option of options){ if (option.selected) { value.push(option.value); } } setRecipeData((prev)=>({ ...prev, [e.target.name]: value })); }; const handleSave = ()=>{}; const handleRegenerate = ()=>{}; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: JSON.stringify(recipeData) } ], system_prompt: 'Create a recipe with these details' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setLoading(false); if (data.status) { setRecipeOutput(data.result); } }; const recipeSteps = recipeOutput.split('\n').map((step, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, step)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container mx-auto px-6 py-3 flex justify-between items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-xl text-[#121212]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Recipe Generator"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/saved-recipes", className: "px-4 py-2 hover:text-[#0056b3] transition duration-300 text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Saved Recipes")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 pt-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "updateText", name: "updateText", value: updateText, onChange: handleUpdateTextChange, className: "w-[300px] px-4 py-2 border rounded shadow-sm text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleSave, className: "px-6 py-2 bg-[#4CAF50] text-white rounded shadow", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleRegenerate, className: "px-6 py-2 bg-[#f44336] text-white rounded shadow", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Regenerate")))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-32 w-32 border-b-2 border-[#4CAF50]", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("ul", { className: "list-disc space-y-2 mt-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, recipeSteps)), /*#__PURE__*/ React.createElement("footer", { className: "mt-12 bg-white py-4", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 text-center text-[#121212]", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "© Recipe Generator"))); }