function MainComponent() { const [foodItem, setFoodItem] = React.useState(''); const [entries, setEntries] = React.useState([]); const calorieDatabase = { "Banana": 89, "Apple": 52, "Orange": 47, "Bread": 265, "Rice": 130, "Chicken Breast": 165, "Broccoli": 34 }; const handleFoodItemChange = (event)=>{ setFoodItem(event.target.value); }; const handleAdd = ()=>{ if (!foodItem || !calorieDatabase[foodItem]) return; const calories = calorieDatabase[foodItem]; const newEntry = { foodItem, calories }; setEntries([ ...entries, newEntry ]); setFoodItem(''); }; const handleReset = ()=>{ setFoodItem(''); setEntries([]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-green-400 to-blue-500 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Sophisticated Calorie Tracker"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>e.preventDefault(), className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "food-item", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Food Item"), /*#__PURE__*/ React.createElement("input", { value: foodItem, onChange: handleFoodItemChange, list: "food-items", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "food-item", type: "text", placeholder: "e.g., Banana", name: "foodItem", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("datalist", { id: "food-items", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, Object.keys(calorieDatabase).map((item)=>/*#__PURE__*/ React.createElement("option", { key: item, value: item, __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleAdd, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "button", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Add"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "button", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Reset"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white mb-4 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Entries"), /*#__PURE__*/ React.createElement("ul", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, entries.map((entry, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b border-gray-400 mb-2 pb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, entry.foodItem, " - ", entry.calories, " Calories"))))); }