function MainComponent({ hours = 24, minutes = 0, seconds = 0 }) { const [[hrs, mins, secs], setTime] = React.useState([ hours, minutes, seconds ]); React.useEffect(()=>{ const countdown = setInterval(()=>{ setTime((prevTime)=>{ let [hours, minutes, seconds] = prevTime; if (seconds > 0) { seconds--; } else if (minutes > 0) { minutes--; seconds = 59; } else if (hours > 0) { hours--; minutes = 59; seconds = 59; } return [ hours, minutes, seconds ]; }); }, 1000); return ()=>clearInterval(countdown); }, []); const timeString = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-roboto text-[#121212] bg-[#f0f0f0] p-4 rounded-md", style: { fontFamily: "'Courier New', monospace" }, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, timeString), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-crimson-text text-lg text-[#666]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "タイマー終了までの時間")); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Default 24 Hours Countdown"), /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "15 Minutes Countdown"), /*#__PURE__*/ React.createElement(MainComponent, { hours: 0, minutes: 15, seconds: 0, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Custom 1 Hour 45 Minutes and 30 Seconds Countdown"), /*#__PURE__*/ React.createElement(MainComponent, { hours: 1, minutes: 45, seconds: 30, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }))); }