function MainComponent() { const [mode, setMode] = React.useState('3人麻雀'); const [players, setPlayers] = React.useState([ '山田', '佐藤', '高橋' ]); const [results, setResults] = React.useState([ { date: '2023-04-01', winner: '山田', points: '+30' }, { date: '2023-04-02', winner: '佐藤', points: '+50' } ]); const changeMode = (newMode)=>setMode(newMode); const addPlayer = ()=>setPlayers([ ...players, `プレイヤー${players.length + 1}` ]); const inviteFriend = ()=>{}; const sendResults = ()=>{}; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white p-4 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "雀ログ"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "麻雀の結果集計アプリ")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", onClick: ()=>changeMode('3人麻雀'), __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "3人麻雀"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded", onClick: ()=>changeMode('4人麻雀'), __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "4人麻雀")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "集計 - ", mode), mode === '3人麻雀' ? /*#__PURE__*/ React.createElement("table", { className: "w-full text-left border-collapse", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "勝者"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "ポイント"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-t p-2", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, result.date), /*#__PURE__*/ React.createElement("td", { className: "border-t p-2", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, result.winner), /*#__PURE__*/ React.createElement("td", { className: "border-t p-2", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, result.points))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "4人麻雀は現在サポートされていません"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-gray-500 text-white py-2 px-4 rounded", onClick: addPlayer, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "プレイヤー追加")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "月ごとの集計"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center w-1/3", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "2023-04"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-green-500", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "+80")), /*#__PURE__*/ React.createElement("div", { className: "text-center w-1/3", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "2023-05"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-red-500", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "-20")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "日ごとの集計"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center w-1/3", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "2023-04-01"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-green-500", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "+30")), /*#__PURE__*/ React.createElement("div", { className: "text-center w-1/3", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "2023-04-02"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-green-500", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "+50")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white py-2 px-4 rounded w-full", onClick: inviteFriend, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "友達を招待"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-purple-500 text-white py-2 px-4 rounded w-full", onClick: sendResults, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "結果を送信"))); }

日付	勝者	ポイント
2023-04-01	山田	+30
2023-04-02	佐藤	+50

集計 - 3人麻雀

月ごとの集計

日ごとの集計