function MainComponent() { const [members, setMembers] = React.useState([]); const [expenses, setExpenses] = React.useState([]); const [paymentInstructions, setPaymentInstructions] = React.useState([]); const handleAddMember = (e)=>{ e.preventDefault(); const memberName = e.target.elements.memberName.value.trim(); if (memberName) { setMembers([ ...members, memberName ]); } e.target.reset(); }; const handleAddExpense = (e)=>{ e.preventDefault(); const payer = e.target.elements.payer.value; const amount = parseFloat(e.target.elements.amount.value); const description = e.target.elements.description.value.trim(); if (payer && amount && description) { setExpenses([ ...expenses, { payer, amount, description } ]); } e.target.reset(); }; const calculatePayments = ()=>{ const payments = {}; members.forEach((member)=>{ payments[member] = 0; }); expenses.forEach((expense)=>{ const share = expense.amount / members.length; payments[expense.payer] += expense.amount - share; members.forEach((member)=>{ if (member !== expense.payer) { payments[member] -= share; } }); }); const instructions = []; Object.entries(payments).forEach(([payer, amount])=>{ if (amount > 0) { instructions.push(`${payer} needs to receive ${Math.abs(amount).toFixed(2)}`); } else if (amount < 0) { instructions.push(`${payer} needs to pay ${Math.abs(amount).toFixed(2)}`); } }); setPaymentInstructions(instructions); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-6 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "割り勘アプリ"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddMember, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "memberName", type: "text", placeholder: "メンバー名を追加", className: "border p-2 w-full mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 w-full", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "メンバーを追加"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddExpense, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "payer", type: "text", placeholder: "支払者", className: "border p-2 w-full mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "amount", type: "number", placeholder: "金額", className: "border p-2 w-full mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "description", type: "text", placeholder: "説明", className: "border p-2 w-full mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white p-2 w-full", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "費用を追加"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: calculatePayments, className: "bg-red-500 text-white p-2 w-full", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "支払い指示を計算")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, "支払い指示:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, paymentInstructions.map((instruction, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, instruction))))); }