function MainComponent() { const [fishSpecies, setFishSpecies] = React.useState('catfish'); const [weight, setWeight] = React.useState(''); const [temperature, setTemperature] = React.useState(''); const [stockingDensity, setStockingDensity] = React.useState(''); const [secchiDepth, setSecchiDepth] = React.useState(''); const [respirationResults, setRespirationResults] = React.useState({ fishRespiration: '', phytoplanktonRespiration: '', microbialRespiration: '', sedimentRespiration: '' }); const calculateRespirationRates = ()=>{ const W = parseFloat(weight); const T = parseFloat(temperature); const SD = parseFloat(stockingDensity); const SDD = parseFloat(secchiDepth); let fishRespiration; if (fishSpecies === 'catfish') { const logO2 = -0.999 - 0.000957 * W + 0.0000006 * W ** 2 + 0.0327 * T - 0.0000087 * T ** 2 + 0.0000003 * W * T; const baseRespiration = 10 ** logO2; const modeSwimming = baseRespiration * (0.25 + 0.4); // 25% - 40% during swimming const recovery = baseRespiration * 0.15; // 15% during recovery fishRespiration = modeSwimming + recovery; } else { const FR = 2014.45 + 2.75 * W - 165.2 * T + 0.007 * W ** 2 + 3.932 * T ** 2 - 0.21 * W * T; fishRespiration = FR * SD / 1000; } const DOPR = -1.133 + 0.0038 * SDD + 0.000014 * SDD ** 2 + 0.081 * T - 0.000749 * T ** 2 - 0.00035 * SDD * T; setRespirationResults({ fishRespiration: fishRespiration.toFixed(2) + ' g O2/kg fish/hr', phytoplanktonRespiration: DOPR.toFixed(2) + ' g O2/m²/hr', microbialRespiration: 'Details for the equation need to be defined', sedimentRespiration: 'Details for the equation need to be defined' }); }; return /*#__PURE__*/ React.createElement("div", { className: "pt-10 px-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "Aquatic Respiration Rate Calculator"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fishSpecies", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Select Fish Species:"), /*#__PURE__*/ React.createElement("select", { name: "fishSpecies", id: "fishSpecies", className: "w-full p-2 border border-gray-300 rounded", value: fishSpecies, onChange: (e)=>setFishSpecies(e.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "catfish", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Catfish"), /*#__PURE__*/ React.createElement("option", { value: "tilapia", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Tilapia"), /*#__PURE__*/ React.createElement("option", { value: "carps", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Carps"), /*#__PURE__*/ React.createElement("option", { value: "koi", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Koi"), /*#__PURE__*/ React.createElement("option", { value: "shol", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Shol"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weight", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Average Fish Weight (in grams):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight", id: "weight", className: "w-full p-2 border border-gray-300 rounded", value: weight, onChange: (e)=>setWeight(e.target.value), __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "temperature", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Temperature (°C):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "temperature", id: "temperature", className: "w-full p-2 border border-gray-300 rounded", value: temperature, onChange: (e)=>setTemperature(e.target.value), __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "stockingDensity", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Stocking Density (kg fish/m³):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "stockingDensity", id: "stockingDensity", className: "w-full p-2 border border-gray-300 rounded", value: stockingDensity, onChange: (e)=>setStockingDensity(e.target.value), __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "secchiDepth", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Secchi Disc Depth (m):"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "secchiDepth", id: "secchiDepth", className: "w-full p-2 border border-gray-300 rounded", value: secchiDepth, onChange: (e)=>setSecchiDepth(e.target.value), __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "p-2 bg-blue-500 text-white w-full rounded hover:bg-blue-600 transition duration-200", onClick: calculateRespirationRates, __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "Calculate Respiration Rates"), respirationResults.fishRespiration && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Fish Respiration Rate: ", respirationResults.fishRespiration), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Phytoplankton Respiration Rate: ", respirationResults.phytoplanktonRespiration), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Microbial Respiration Rate: ", respirationResults.microbialRespiration), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Sediment Respiration Rate: ", respirationResults.sedimentRespiration)))); }