function MainComponent({ algorithm, factors, onDesignSubmit }) { const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const data = {}; formData.forEach((value, key)=>{ data[key] = value; }); onDesignSubmit(data); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4 bg-[#F0F0F0] min-h-screen", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Design of Experiments (DoE)"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "algorithm-select", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Algorithm"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline", id: "algorithm-select", name: "algorithm", defaultValue: algorithm, __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "fullFactorial", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "Full Factorial"), /*#__PURE__*/ React.createElement("option", { value: "fractionalFactorial", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "Fractional Factorial"), /*#__PURE__*/ React.createElement("option", { value: "taguchi", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "Taguchi")))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "factors-field", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Factors (comma separated)"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-white text-gray-700 border border-gray-400 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "factors-field", type: "text", placeholder: "e.g. temperature, pressure", name: "factors", defaultValue: factors.join(', '), __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "shadow bg-blue-500 hover:bg-blue-700 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded", type: "submit", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Design Experiment")))); } function StoryComponent() { const handleDesignSubmit = (data)=>{ console.log('Design submitted with data:', data); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { algorithm: "fullFactorial", factors: [ 'temperature', 'pressure' ], onDesignSubmit: handleDesignSubmit, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { algorithm: "fractionalFactorial", factors: [ 'time', 'concentration', 'pressure' ], onDesignSubmit: handleDesignSubmit, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { algorithm: "taguchi", factors: [ 'ph', 'agitation' ], onDesignSubmit: handleDesignSubmit, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this })); }