function MainComponent() { const [tab, setTab] = React.useState('spectraInput'); const [environments, setEnvironments] = React.useState(1); const [initialParameters, setInitialParameters] = React.useState([ { s: '', i: '', w: '' } ]); const [adjustedParameters, setAdjustedParameters] = React.useState([]); React.useEffect(()=>{ setInitialParameters(Array.from({ length: environments }, ()=>({ s: '', i: '', w: '' }))); setAdjustedParameters(Array.from({ length: environments }, ()=>({ s: '', i: '', w: '' }))); }, [ environments ]); const handleEnvironmentsChange = (e)=>{ setEnvironments(Number(e.target.value)); }; const handleChangeInitial = (index, field, value)=>{ const newParameters = [ ...initialParameters ]; newParameters[index][field] = value; setInitialParameters(newParameters); }; let content; switch(tab){ case 'spectraInput': content = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Number of environments:"), /*#__PURE__*/ React.createElement("input", { type: "number", className: "p-2 border bg-white w-full font-roboto", name: "environments", value: environments, onChange: handleEnvironmentsChange, min: "1", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Upload Mossbauer File:"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "w-full font-roboto", name: "mossbauerFile", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Environment"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "Isomer Shift"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Intensity"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Width"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, initialParameters.map((param, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, "Singulet ", index + 1), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "p-2 w-full font-roboto", value: param.s, onChange: (e)=>handleChangeInitial(index, 's', e.target.value), name: `isomerShift${index + 1}`, placeholder: "0.00", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "p-2 w-full font-roboto", value: param.i, onChange: (e)=>handleChangeInitial(index, 'i', e.target.value), name: `intensity${index + 1}`, placeholder: "0.00", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "p-2 w-full font-roboto", value: param.w, onChange: (e)=>handleChangeInitial(index, 'w', e.target.value), name: `width${index + 1}`, placeholder: "0.00", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }))))))); break; case 'graphDisplay': content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Graph display placeholder"); break; case 'adjustedParams': content = /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Environment"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Isomer Shift"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Intensity"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "Width"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, adjustedParameters.map((param, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, "Singulet ", index + 1), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, param.s), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, param.i), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, param.w))))); break; default: content = null; } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-8", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `font-roboto py-2 px-4 ${tab === 'spectraInput' ? 'text-white bg-[#121212]' : 'text-[#121212] bg-transparent'}`, onClick: ()=>setTab('spectraInput'), __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, "Spectra Input"), /*#__PURE__*/ React.createElement("button", { className: `font-roboto py-2 px-4 ${tab === 'graphDisplay' ? 'text-white bg-[#121212]' : 'text-[#121212] bg-transparent'}`, onClick: ()=>setTab('graphDisplay'), __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "Graph Display"), /*#__PURE__*/ React.createElement("button", { className: `font-roboto py-2 px-4 ${tab === 'adjustedParams' ? 'text-white bg-[#121212]' : 'text-[#121212] bg-transparent'}`, onClick: ()=>setTab('adjustedParams'), __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, "Adjusted Parameters")), content); }