function MainComponent() { const [imageLoading, setImageLoading] = React.useState(false); const [mealData, setMealData] = React.useState({ mealName: '', protein: '', carbs: '', calories: '', macros: '' }); const handleImageUpload = async (event)=>{ setImageLoading(true); const file = event.target.files[0]; if (file) { // Process image through Vision AI here // Mockup response from AI const AIData = { mealName: 'Grilled Chicken Salad', protein: '30', carbs: '10', calories: '250', macros: 'Fat: 10g, Saturated Fat: 2g' }; setMealData(AIData); setImageLoading(false); } }; const handleChange = (event)=>{ const { name, value } = event.target; setMealData((prevData)=>({ ...prevData, [name]: value })); }; const handleSubmit = (event)=>{ event.preventDefault(); // Send mealData to backend or store locally }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#F0F4F8]", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#5B21B6] text-white p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-epilogue text-3xl", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Health Tracker AI")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-4 space-y-6", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-epilogue text-2xl mb-3", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Meal Identification"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", autoComplete: "off", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-[300px] h-[200px] relative", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, imageLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-full h-full bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner animate-spin text-2xl text-[#2563EB]", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this })) : /*#__PURE__*/ React.createElement("img", { src: "./upload-placeholder.jpg", alt: "Meal for AI recognition", className: "w-full h-full object-cover rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", className: "absolute bottom-2 right-2 bg-[#2563EB] text-white py-2 px-4 rounded cursor-pointer font-barlow", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { id: "image-upload", type: "file", name: "meal-image", className: "hidden", accept: "image/*", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "meal-name", className: "font-barlow text-md block mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Meal Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "meal-name", name: "mealName", value: mealData.mealName, className: "w-full px-4 py-2 rounded border border-gray-300", onChange: handleChange, __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 grid-cols-2", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "protein-amount", className: "font-barlow text-md mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "Protein (g)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "protein-amount", name: "protein", value: mealData.protein, className: "w-full px-4 py-2 rounded border border-gray-300", onChange: handleChange, __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "carbs-amount", className: "font-barlow text-md mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Carbs (g)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "carbs-amount", name: "carbs", value: mealData.carbs, className: "w-full px-4 py-2 rounded border border-gray-300", onChange: handleChange, __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "calories-amount", className: "font-barlow text-md mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, "Calories (kcal)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "calories-amount", name: "calories", value: mealData.calories, className: "w-full px-4 py-2 rounded border border-gray-300", onChange: handleChange, __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "macros-list", className: "font-barlow text-md mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, "Macros"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "macros-list", name: "macros", value: mealData.macros, className: "w-full px-4 py-2 rounded border border-gray-300", onChange: handleChange, __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#10B981] text-white py-3 mt-4 rounded font-barlow", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Add to Journal")))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-epilogue text-2xl mb-3", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Health Reminders"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tint text-[#2563EB] text-lg mr-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-barlow text-md", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Hydration Tracker")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pills text-[#EAB308] text-lg mr-2", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-barlow text-md", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Vitamin Intake")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-check text-[#10B981] text-lg mr-2", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-barlow text-md", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Appointment Scheduler"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1F2937] text-white p-4", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-barlow text-center", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "© 2023 Health Tracker AI")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }