function MainComponent() { const [result, setResult] = React.useState(''); const calculatePoints = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const myPoints = parseInt(formData.get('myPoints'), 10); const leaderPoints = parseInt(formData.get('leaderPoints'), 10); const boardCards = parseInt(formData.get('boardCards'), 10); const boardPoints = formData.get('boardPoints').split(',').map(Number); const totalBoardPoints = boardPoints.reduce((total, points)=>total + points, 0); const finalResult = myPoints * boardCards + leaderPoints * totalBoardPoints; setResult(`最終的なポイント: ${finalResult}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F7F7]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "ポイント計算アプリ"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: calculatePoints, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "myPoints", className: "block text-sm font-medium text-[#333] mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "自分の手のポイント合計:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "myPoints", name: "myPoints", className: "mt-1 block w-full px-3 py-2 bg-white border border-[#CCC] rounded-md shadow-sm focus:outline-none focus:ring-[#8A4F7D] focus:border-[#8A4F7D]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "leaderPoints", className: "block text-sm font-medium text-[#333] mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "リーダーのポイント:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "leaderPoints", name: "leaderPoints", className: "mt-1 block w-full px-3 py-2 bg-white border border-[#CCC] rounded-md shadow-sm focus:outline-none focus:ring-[#8A4F7D] focus:border-[#8A4F7D]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "boardCards", className: "block text-sm font-medium text-[#333] mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "ボードのカード枚数:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "boardCards", name: "boardCards", className: "mt-1 block w-full px-3 py-2 bg-white border border-[#CCC] rounded-md shadow-sm focus:outline-none focus:ring-[#8A4F7D] focus:border-[#8A4F7D]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "boardPoints", className: "block text-sm font-medium text-[#333] mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "各カードのボードポイント:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "boardPoints", name: "boardPoints", className: "mt-1 block w-full px-3 py-2 bg-white border border-[#CCC] rounded-md shadow-sm focus:outline-none focus:ring-[#8A4F7D] focus:border-[#8A4F7D]", placeholder: "例: 3,5,8", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#8A4F7D] hover:bg-[#6F3965] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#8A4F7D]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "計算"))), result && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-xl text-[#333]", __source: { fileName: "", lineNumber: 43, columnNumber: 18 }, __self: this }, result)); }