function RecipeSuggestionButton({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RecipeSuggestionButtonStory() { const exampleClickHandler = ()=>{ console.log("Button Clicked"); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RecipeSuggestionButton, { onClick: exampleClickHandler, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Obtener Recetas")); } function ChefVirtualRecipeFinder({ title, ingredients, onIngredientsChange, onSubmit, recipe }) { const recipeSuggestion = recipe ? /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded-lg shadow-inner", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left text-gray-700", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "chef", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, "👨‍🍳"), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Aquí tienes una receta:")), /*#__PURE__*/ React.createElement("div", { className: "text-left mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, recipe.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Ingredientes: ", recipe.ingredients)), /*#__PURE__*/ React.createElement("img", { src: recipe.imageUrl, alt: "Paella terminada", className: "w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this })))) : null; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-gray-900 mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ingredients", className: "font-medium text-gray-700", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Ingresar ingredientes:"), /*#__PURE__*/ React.createElement("textarea", { id: "ingredients", name: "ingredients", value: ingredients, onChange: onIngredientsChange, className: "mt-1 block w-full h-32 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", placeholder: "Escribe tus ingredientes aquí...", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(RecipeSuggestionButton, { onClick: onSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Obtener Recetas"), recipeSuggestion)); } function ChefVirtualRecipeFinderStory() { const [ingredients, setIngredients] = React.useState(''); const [recipe, setRecipe] = React.useState(null); const handleInputChange = (event)=>{ setIngredients(event.target.value); }; const handleSubmit = ()=>{ const mockRecipe = { name: 'Paella', ingredients: 'Arroz, Pollo, Mariscos, Verduras', imageUrl: '/images/paella.jpg' }; setRecipe(mockRecipe); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChefVirtualRecipeFinder, { title: "Chef Virtual", ingredients: ingredients, onIngredientsChange: handleInputChange, onSubmit: handleSubmit, recipe: recipe, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this })); } function MainComponent() { const [recipe, setRecipe] = React.useState(null); const [ingredients, setIngredients] = React.useState(""); const handleInputChange = (e)=>{ setIngredients(e.target.value); }; const handleSubmit = async ()=>{ const fetchedRecipe = { name: "Paella", ingredients: "Arroz, Pollo, Mariscos, Verduras", imageUrl: "/images/paella-example.jpg" }; setRecipe(fetchedRecipe); }; return /*#__PURE__*/ React.createElement(ChefVirtualRecipeFinder, { title: "Chef Virtual", ingredients: ingredients, onIngredientsChange: handleInputChange, onSubmit: handleSubmit, recipe: recipe, __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }); }