function MainComponent() { const [result, setResult] = React.useState(null); const calculate = (event)=>{ event.preventDefault(); const form = event.target; const FMASS = parseFloat(form.FMASS.value); const W = parseFloat(form.W.value); const T = parseFloat(form.T.value); const VOL = parseFloat(form.VOL.value); const SD = parseFloat(form.SD.value); const DEPTH = parseFloat(form.DEPTH.value); const WIND = parseFloat(form.WIND.value); const SAT = parseFloat(form.SAT.value); const I0 = parseFloat(form.I0.value); const KC = 1.768 / SD; const Chla = Math.pow(10, 2.33 - 0.94 * Math.log(SD)); const EXT = 0.594 * Math.exp(-0.00594 * (3e8 / 6.24e14)) + KC * Chla; const ZEU = 4.6 / EXT; const UFRESP = Math.pow(10, -0.999 - 0.000957 * W + 0.0000006 * Math.pow(W, 2) + 0.0327 * T - 0.0000087 * Math.pow(T, 2) + 0.000003 * W * T); const FRESP = FMASS * UFRESP / VOL; const PRESPR = -1.133 + 0.00381 * SD + 0.0000145 * Math.pow(SD, 2) + 0.0812 * T - 0.000749 * Math.pow(T, 2) - 0.000349 * SD * T; const BRESP = 0.061 / DEPTH; const REAER = (0.03 * Math.sqrt(WIND) - 0.0132 * WIND + 0.0015 * Math.pow(WIND, 2)) * (SAT - form.DO.value); const PMAX = 0.594 * I0 * ZEU; const EXT_W = 0.594 * Math.exp(-0.00594 * (3e8 / 6.24e14)); const ZMAX = 4.6 / EXT_W; const RAD = (lambda)=>{ switch(lambda){ case 440: return 0.594 * Math.exp(-0.1182 - 0.4892 * EXT) + 0.0604 + 0.7546 * EXT_W; case 550: return 0.594 * Math.exp(-0.1182 - 0.4892 * EXT) + 0.1182 + 0.4892 * EXT_W; default: return 0; } }; const PHAR = 0.43 * (RAD(440) + RAD(550)); const GPP = (1 - ZEU / ZMAX) * PMAX * PHAR; setResult({ FRESP, PRESPR, BRESP, REAER, GPP }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "Pond Calculations"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: calculate, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "FMASS", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Fish Biomass per Unit Area of Pond (FMASS)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "FMASS", name: "FMASS", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "W", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Mass of One Fish (W)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "W", name: "W", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "T", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Water Temperature (T)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "T", name: "T", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "VOL", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Water Volume per Unit Area of Pond (VOL)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "VOL", name: "VOL", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "SD", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Secchi Disk Depth (SD)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "SD", name: "SD", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "DEPTH", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Average Pond Depth (DEPTH)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "DEPTH", name: "DEPTH", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "WIND", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Wind Velocity (WIND)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "WIND", name: "WIND", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "SAT", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Saturation Level (SAT)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "SAT", name: "SAT", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "I0", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Surface Light Intensity (I0)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "I0", name: "I0", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1 font-roboto", htmlFor: "DO", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Dissolved Oxygen (DO)"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "DO", name: "DO", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white font-bold rounded", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Calculate")), result && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 107, columnNumber: 38 }, __self: this }, "Total Fish Respiration (FRESP):"), " ", result.FRESP.toFixed(3), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 108, columnNumber: 38 }, __self: this }, "Plankton Respiration (PRESPR):"), " ", result.PRESPR.toFixed(3), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 109, columnNumber: 38 }, __self: this }, "Benthic Respiration (BRESP):"), " ", result.BRESP.toFixed(3), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 110, columnNumber: 38 }, __self: this }, "Reaeration (REAER):"), " ", result.REAER.toFixed(3), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 111, columnNumber: 38 }, __self: this }, "Gross Primary Production (GPP):"), " ", result.GPP.toFixed(3), " g m^-3"))); }