function MainComponent() { const [macros, setMacros] = React.useState({ protein: '', carbs: '', fat: '' }); const [calories, setCalories] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleChange = (event)=>{ setMacros({ ...macros, [event.target.name]: event.target.value }); }; const calculateCalories = ()=>{ setIsLoading(true); const proteinCalories = Number(macros.protein) * 4; const carbsCalories = Number(macros.carbs) * 4; const fatCalories = Number(macros.fat) * 9; setCalories(proteinCalories + carbsCalories + fatCalories); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-5", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md space-y-5", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "protein", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Protein (grams):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "protein", id: "protein", value: macros.protein, onChange: handleChange, className: "border border-gray-300 p-2 rounded", min: "0", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "carbs", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Carbs (grams):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "carbs", id: "carbs", value: macros.carbs, onChange: handleChange, className: "border border-gray-300 p-2 rounded", min: "0", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fat", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Fat (grams):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fat", id: "fat", value: macros.fat, onChange: handleChange, className: "border border-gray-300 p-2 rounded", min: "0", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: calculateCalories, className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", disabled: isLoading, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${isLoading ? 'fa fa-spinner fa-spin' : 'fa fa-calculator'}`, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), ' ', isLoading ? 'Calculating...' : 'Calculate'), calories !== '' && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Total Calories: ", calories))); }