function MainComponent() { const [surveyPairs, setSurveyPairs] = React.useState([]); const [draggingItemIndex, setDraggingItemIndex] = React.useState(null); const handleAddPair = ()=>{ const newPair = { question: "", answer: "" }; setSurveyPairs([ ...surveyPairs, newPair ]); }; const handleDelete = (index)=>{ const updatedPairs = [ ...surveyPairs ]; updatedPairs.splice(index, 1); setSurveyPairs(updatedPairs); }; const handleDragStart = (index)=>{ setDraggingItemIndex(index); }; const handleDragEnter = (index)=>{ if (draggingItemIndex === index) return; const updatedPairs = [ ...surveyPairs ]; const draggedItem = updatedPairs.splice(draggingItemIndex, 1)[0]; updatedPairs.splice(index, 0, draggedItem); setDraggingItemIndex(index); setSurveyPairs(updatedPairs); }; React.useEffect(()=>{ document.getElementById('survey-data').textContent = JSON.stringify(surveyPairs, null, 2); }, [ surveyPairs ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Survey Builder"), /*#__PURE__*/ React.createElement("button", { onClick: handleAddPair, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("ul", { id: "survey-list", className: "space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, surveyPairs.map((pair, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center space-x-4 bg-white p-4 rounded shadow", draggable: true, onDragStart: ()=>handleDragStart(index), onDragEnter: ()=>handleDragEnter(index), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `question-${index}`, value: pair.question, onChange: (e)=>{ const updatedPairs = [ ...surveyPairs ]; updatedPairs[index].question = e.target.value; setSurveyPairs(updatedPairs); }, className: "flex-1 p-2 border rounded", placeholder: "Question", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `answer-${index}`, value: pair.answer, onChange: (e)=>{ const updatedPairs = [ ...surveyPairs ]; updatedPairs[index].answer = e.target.value; setSurveyPairs(updatedPairs); }, className: "flex-1 p-2 border rounded", placeholder: "Answer", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(index), className: "text-red-500", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 55, columnNumber: 84 }, __self: this })), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrows-alt", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Survey Data"), /*#__PURE__*/ React.createElement("pre", { id: "survey-data", className: "mt-2 p-2 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })))); }