function MainComponent() { const [values, setValues] = React.useState({ phytoplanktonProduction: 0, oxygenDiffusion: 0, fishRespiration: 0, phytoplanktonRespiration: 0, waterColumnRespiration: 0, sedimentRespiration: 0, oxygenDiffusionDepth: 0, excessOxygenDemand: 0 }); const [netOxygenChange, setNetOxygenChange] = React.useState(0); const handleChange = (event)=>{ setValues({ ...values, [event.target.name]: parseFloat(event.target.value) || 0 }); }; const handleSubmit = (event)=>{ event.preventDefault(); const { phytoplanktonProduction, oxygenDiffusion, fishRespiration, phytoplanktonRespiration, waterColumnRespiration, sedimentRespiration, oxygenDiffusionDepth, excessOxygenDemand } = values; const netChange = phytoplanktonProduction + oxygenDiffusion - fishRespiration - phytoplanktonRespiration - waterColumnRespiration - sedimentRespiration + oxygenDiffusionDepth - excessOxygenDemand; setNetOxygenChange(netChange); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center bg-[#f0f4f8] min-h-screen", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Dissolved Oxygen Calculator"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phytoplanktonProduction", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Phytoplankton oxygen production (MO₂p) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "phytoplanktonProduction", name: "phytoplanktonProduction", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "oxygenDiffusion", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Oxygen diffusion (MO₂D) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "oxygenDiffusion", name: "oxygenDiffusion", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fishRespiration", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Fish respiration (MO₂f) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "fishRespiration", name: "fishRespiration", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phytoplanktonRespiration", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Phytoplankton respiration (MO₂pr) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "phytoplanktonRespiration", name: "phytoplanktonRespiration", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "waterColumnRespiration", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Water column respiration (MO₂wcr) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "waterColumnRespiration", name: "waterColumnRespiration", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "sedimentRespiration", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Sediment respiration (MO₂sr) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "sedimentRespiration", name: "sedimentRespiration", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "oxygenDiffusionDepth", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Effective oxygen diffusion at depth (MO₂d,z) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "oxygenDiffusionDepth", name: "oxygenDiffusionDepth", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "excessOxygenDemand", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Excess oxygen demand by sediment (MO₂xs) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "excessOxygenDemand", name: "excessOxygenDemand", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#0056b3] focus:border-[#0056b3] block w-full p-2.5", required: true, onChange: handleChange, __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Calculate Net Oxygen Change"))), /*#__PURE__*/ React.createElement("div", { className: "pt-6", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#333]", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "Net Oxygen Change (MO₂net) (mg O₂/m³/hr):"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-medium text-[#0056b3]", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, netOxygenChange)))); }