function MainComponent() { const [query, setQuery] = React.useState(''); const [response, setResponse] = React.useState(''); const [showVideo, setShowVideo] = React.useState(false); const [searchTerms, setSearchTerms] = React.useState({ ingredients: '', time: '', calories: '' }); const handleQueryChange = (e)=>{ setQuery(e.target.value); }; const handleSearchChange = (e)=>{ setSearchTerms({ ...searchTerms, [e.target.name]: e.target.value }); }; const handleSubmit = async ()=>{ // Simulation of fetching data based on user query const fetchedResponse = `Information or recipe related to: ${query}`; setResponse(fetchedResponse); }; const handleRecipeSearch = async ()=>{ // Simulation of fetching recipe based on search terms const searchResponse = `Recipes with ${searchTerms.ingredients} under ${searchTerms.calories} calories that take ${searchTerms.time} to prepare.`; setResponse(searchResponse); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-5 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-2xl text-[#333] font-roboto mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Cooking Chatbot"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white rounded shadow p-6 space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", placeholder: "Ask me anything about cooking...", className: "w-full border border-gray-300 p-2 rounded", value: query, onChange: handleQueryChange, __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: handleSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Ask"), /*#__PURE__*/ React.createElement("hr", { className: "my-4", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "ingredients", placeholder: "Ingredients", value: searchTerms.ingredients, onChange: handleSearchChange, className: "flex-1 border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "time", placeholder: "Max time (min)", value: searchTerms.time, onChange: handleSearchChange, className: "w-[100px] border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "calories", placeholder: "Max calories", value: searchTerms.calories, onChange: handleSearchChange, className: "w-[120px] border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600", onClick: handleRecipeSearch, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "Search Recipes"), /*#__PURE__*/ React.createElement("div", { className: "text-lg text-[#333] font-roboto mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, response), showVideo && /*#__PURE__*/ React.createElement("video", { controls: true, className: "max-w-full mt-4", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "path_to_cooking_demo.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 80, columnNumber: 25 }, __self: this }), "Sorry, your browser does not support embedded videos."))); }