function MainComponent() { const [time, setTime] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); React.useEffect(()=>{ let interval; if (isRunning) { interval = setInterval(()=>{ setTime((prevTime)=>prevTime + 1); }, 1000); } else if (!isRunning && time !== 0) { clearInterval(interval); } return ()=>clearInterval(interval); }, [ isRunning, time ]); const startTimer = ()=>setIsRunning(true); const stopTimer = ()=>setIsRunning(false); const resetTimer = ()=>{ setTime(0); setIsRunning(false); }; const handleSubmit = (e)=>{ e.preventDefault(); alert("コーヒーのカッピングを行いました。"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FFF8F3]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-4 my-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-medium text-[#3D2C29]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, `${Math.floor(time / 60).toString().padStart(2, '0')}:${(time % 60).toString().padStart(2, '0')}`), /*#__PURE__*/ React.createElement("button", { onClick: startTimer, className: "px-4 py-2 bg-[#6D584F] text-white rounded hover:bg-[#3D2C29]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("button", { onClick: stopTimer, className: "px-4 py-2 bg-[#6D584F] text-white rounded hover:bg-[#3D2C29]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "ストップ"), /*#__PURE__*/ React.createElement("button", { onClick: resetTimer, className: "px-4 py-2 bg-[#6D584F] text-white rounded hover:bg-[#3D2C29]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "リセット")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#3D2C29] mb-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "コーヒーカッピング"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "coffeeName", className: "block text-sm font-medium text-[#3D2C29]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "コーヒー名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "coffeeName", id: "coffeeName", className: "mt-1 block w-full border border-[#D1C4B0] bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-[#6D584F] focus:border-[#6D584F] sm:text-sm", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "roastLevel", className: "block text-sm font-medium text-[#3D2C29]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "焙煎度合い"), /*#__PURE__*/ React.createElement("select", { name: "roastLevel", id: "roastLevel", className: "mt-1 block w-full bg-white border border-[#D1C4B0] shadow-sm focus:outline-none focus:ring-[#6D584F] focus:border-[#6D584F] sm:text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "ライトロースト"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "ミディアムロースト"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "ダークロースト"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "notes", className: "block text-sm font-medium text-[#3D2C29]", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "フレーバーノート"), /*#__PURE__*/ React.createElement("textarea", { id: "notes", name: "notes", rows: "4", className: "mt-1 block w-full border border-[#D1C4B0] py-2 px-3 bg-white shadow-sm focus:outline-none focus:ring-[#6D584F] focus:border-[#6D584F] sm:text-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#8C7461] hover:bg-[#77584E] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#77584E]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "評価する"))); }