function MainComponent() { const [status, setStatus] = React.useState("STOP"); const [times, setTimes] = React.useState({ "指導準備A": 0, "指導準備B": 0, "マーケティングタスク": 0 }); const timer = React.useRef(null); React.useEffect(()=>{ if (status === "STOP") { clearInterval(timer.current); } else { clearInterval(timer.current); timer.current = setInterval(()=>{ setTimes((prevTimes)=>({ ...prevTimes, [status]: prevTimes[status] + 1 })); }, 60000); } return ()=>clearInterval(timer.current); }, [ status ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "作業ステイタス登録"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "status", className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "作業ステイタス:"), /*#__PURE__*/ React.createElement("select", { name: "status", id: "status", className: "block w-full p-2 border border-gray-300 rounded-md", value: status, onChange: (e)=>setStatus(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "STOP", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "STOP"), /*#__PURE__*/ React.createElement("option", { value: "指導準備A", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "指導準備A"), /*#__PURE__*/ React.createElement("option", { value: "指導準備B", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "指導準備B"), /*#__PURE__*/ React.createElement("option", { value: "マーケティングタスク", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "マーケティングタスク"))), /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-200", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b font-crimson-text", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "ステイタス名称"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "累積時間 (分)"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, Object.keys(times).map((key)=>/*#__PURE__*/ React.createElement("tr", { key: key, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 border-b font-crimson-text", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, key), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 border-b font-crimson-text", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, times[key])))))); }

ステイタス名称	累積時間 (分)
指導準備A	0
指導準備B	0
マーケティングタスク	0