function MainComponent() { const [values, setValues] = React.useState(""); const [results, setResults] = React.useState({ average: "-", max: "-", min: "-", stdDev: "-" }); const calculateStatistics = (e)=>{ e.preventDefault(); const valuesArray = values.split(",").map(Number).filter((v)=>!isNaN(v)); if (valuesArray.length === 0 || valuesArray.length > 100) return; const average = valuesArray.reduce((acc, v)=>acc + v, 0) / valuesArray.length; const max = Math.max(...valuesArray); const min = Math.min(...valuesArray); const stdDev = Math.sqrt(valuesArray.map((v)=>(v - average) ** 2).reduce((acc, v)=>acc + v, 0) / valuesArray.length); setResults({ average: average.toFixed(2), max: max.toFixed(2), min: min.toFixed(2), stdDev: stdDev.toFixed(2) }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Statistics Calculator"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm bg-white p-6 rounded shadow-md", onSubmit: calculateStatistics, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-2", htmlFor: "number-of-values", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Number of values (max 100)"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300", type: "number", id: "number-of-values", name: "number-of-values", min: "1", max: "100", onChange: (e)=>setValues(e.target.value), __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-2", htmlFor: "values", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Enter values (comma separated)"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300", id: "values", name: "values", rows: "4", value: values, onChange: (e)=>setValues(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm bg-white p-6 mt-4 rounded shadow-md", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Average: "), /*#__PURE__*/ React.createElement("span", { id: "average", __source: { fileName: "", lineNumber: 69, columnNumber: 37 }, __self: this }, results.average)), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Max: "), /*#__PURE__*/ React.createElement("span", { id: "max", __source: { fileName: "", lineNumber: 72, columnNumber: 33 }, __self: this }, results.max)), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Min: "), /*#__PURE__*/ React.createElement("span", { id: "min", __source: { fileName: "", lineNumber: 75, columnNumber: 33 }, __self: this }, results.min)), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Standard Deviation: "), /*#__PURE__*/ React.createElement("span", { id: "std-dev", __source: { fileName: "", lineNumber: 78, columnNumber: 48 }, __self: this }, results.stdDev)))); }