function MainComponent({ onSubmit, sizesInput }) { const defaultSizeInput = sizesInput || [ { width: '', height: '', quantity: '' } ]; const [sizes, setSizes] = React.useState(defaultSizeInput); const handleChange = (index, event)=>{ const newSizes = sizes.map((size, i)=>{ if (i === index) { return { ...size, [event.target.name]: event.target.value }; } return size; }); setSizes(newSizes); }; const handleAddSize = ()=>{ setSizes([ ...sizes, { width: '', height: '', quantity: '' } ]); }; const handleRemoveSize = (index)=>{ setSizes(sizes.filter((_, i)=>i !== index)); }; const handleSubmit = (event)=>{ event.preventDefault(); onSubmit(sizes); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4 bg-[#F3F4F6] p-4 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#333]", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Добавьте размеры нарезки"), sizes.map((size, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-wrap items-center space-x-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-1 border rounded-md", type: "number", placeholder: "Ширина", name: "width", value: size.width, onChange: (e)=>handleChange(index, e), __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-1 border rounded-md", type: "number", placeholder: "Высота", name: "height", value: size.height, onChange: (e)=>handleChange(index, e), __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-1 border rounded-md", type: "number", placeholder: "Количество", name: "quantity", value: size.quantity, onChange: (e)=>handleChange(index, e), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), index > 0 && /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm text-[#D32F2F] font-semibold", onClick: ()=>handleRemoveSize(index), __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Удалить"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-[#1976D2] font-semibold", onClick: handleAddSize, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Добавить размер"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#1976D2] text-white rounded-md", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Запустить расчет"))); } function StoryComponent() { const sizesInput = [ { width: '50', height: '30', quantity: '3' }, { width: '20', height: '15', quantity: '5' } ]; const handleSubmit = (sizes)=>{ console.log('Submitted sizes:', sizes); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto my-10", __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center mb-5", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, "Расчет расположения нарезки"), /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, sizesInput: sizesInput, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this })); }