function MainComponent() { const [time, setTime] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); const [laps, setLaps] = React.useState([]); React.useEffect(()=>{ let interval; if (isRunning) { interval = setInterval(()=>{ setTime((prevTime)=>prevTime + 1); }, 1000); } return ()=>clearInterval(interval); }, [ isRunning ]); const formatTime = (seconds)=>{ const hours = Math.floor(seconds / 3600); const minutes = Math.floor(seconds % 3600 / 60); const remainingSeconds = seconds % 60; return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`; }; const handleStart = ()=>setIsRunning(true); const handleStop = ()=>setIsRunning(false); const handleReset = ()=>{ setIsRunning(false); setTime(0); setLaps([]); }; const handleLap = ()=>{ setLaps((prevLaps)=>[ ...prevLaps, time ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-100 to-gray-300 font-roboto text-gray-800", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-8 text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "リッチタイマー"), /*#__PURE__*/ React.createElement("div", { className: "text-7xl font-bold mb-8 bg-white rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, formatTime(time)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleStart, className: "bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), "スタート"), /*#__PURE__*/ React.createElement("button", { onClick: handleStop, className: "bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), "ストップ"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), "リセット"), /*#__PURE__*/ React.createElement("button", { onClick: handleLap, className: "bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-flag-checkered mr-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), "ラップ")), laps.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 max-w-md w-full shadow-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-gray-700", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "ラップタイム"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, laps.map((lap, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between text-gray-600", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "ラップ ", index + 1), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, formatTime(lap))))))); }