function OptionSelectionAbc({ handleChange, selectedOption }) { return /*#__PURE__*/ React.createElement("select", { name: "selection-field", onChange: handleChange, value: selectedOption, className: "border border-gray-300 p-2 w-full font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "A", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "A"), /*#__PURE__*/ React.createElement("option", { value: "B", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("option", { value: "C", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "C")); } function OptionSelectionAbcStory() { const [option, setOption] = React.useState("A"); function handleSelectionChange(event) { setOption(event.target.value); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OptionSelectionAbc, { selectedOption: option, handleChange: handleSelectionChange, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function MainComponent() { const [rows, setRows] = React.useState([ { id: 0, selectedOption: "A", text: "" } ]); const handleInsertRow = ()=>{ setRows([ ...rows, { id: rows.length, selectedOption: "A", text: "" } ]); }; const handleDeleteRow = (id)=>{ setRows(rows.filter((row)=>row.id !== id)); }; const handleInputChange = (id, newText)=>{ setRows(rows.map((row)=>row.id === id ? { ...row, text: newText } : row)); }; const handleOptionChange = (id, newOption)=>{ setRows(rows.map((row)=>row.id === id ? { ...row, selectedOption: newOption } : row)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, rows.map((row)=>/*#__PURE__*/ React.createElement("div", { key: row.id, className: "grid grid-cols-6 gap-4 items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(OptionSelectionAbc, { selectedOption: row.selectedOption, handleChange: (e)=>handleOptionChange(row.id, e.target.value), className: "col-span-1", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "editable-input", value: row.text, onChange: (e)=>handleInputChange(row.id, e.target.value), className: "col-span-2 border border-gray-300 p-2 w-full", placeholder: "Editable text", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "col-span-2 border border-gray-300 p-2 w-full bg-gray-100", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, row.text), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteRow(row.id), className: "px-4 py-2 bg-red-500 text-white rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { onClick: handleInsertRow, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), " Insert Row")); }