function MainComponent() { const [members, setMembers] = React.useState([ { name: 'Alice', paid: 0, owes: 20 }, { name: 'Bob', paid: 10, owes: 10 }, { name: 'Charlie', paid: 30, owes: 0 } ]); const handlePayment = (name)=>{ setMembers(members.map((member)=>{ if (member.name === name) { return { ...member, paid: member.paid + member.owes, owes: 0 }; } return member; })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-2xl text-[#121212] mb-5", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Group Payment Tracker"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212] mb-3", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Members"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, members.map((member)=>/*#__PURE__*/ React.createElement("li", { key: member.name, className: "flex justify-between items-center p-3 border-b border-[#eaeaea]", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, member.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212] mr-3", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Paid: $", member.paid), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212] mr-3", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "Owes: $", member.owes), member.owes > 0 && /*#__PURE__*/ React.createElement("button", { name: "payShare", className: "text-white bg-[#4CAF50] px-4 py-2 rounded shadow hover:bg-[#43A047]", onClick: ()=>handlePayment(member.name), __source: { fileName: "", lineNumber: 31, columnNumber: 21 }, __self: this }, "Pay")))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "calculateShares", className: "text-[#121212] bg-[#e0e0e0] px-6 py-3 rounded font-roboto shadow hover:bg-[#bdbdbd]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Calculate Shares")))); }