function MainComponent({ startTime, endTime, breakTime, onChangeStartTime, onChangeEndTime, onChangeBreakTime }) { const start = new Date(`1970-01-01T${startTime}:00`); const end = new Date(`1970-01-01T${endTime}:00`); const [breakHours, breakMinutes] = breakTime.split(":").map(Number); const breakDuration = breakHours + breakMinutes / 60; let totalHours = (end - start) / (1000 * 60 * 60) - breakDuration; if (totalHours < 0) totalHours += 24; const formattedHours = `${totalHours.toFixed(2)}`; const timeOptions = []; for(let i = 0; i < 24 * 12; i++){ const hours = String(Math.floor(i / 12)).padStart(2, '0'); const minutes = String(i % 12 * 5).padStart(2, '0'); timeOptions.push(`${hours}:${minutes}`); } const breakOptions = []; for(let i = 0; i <= 12; i++){ const minutes = i * 5; breakOptions.push(`01:${String(minutes).padStart(2, '0')}`); } const copyToClipboard = ()=>{ navigator.clipboard.writeText(formattedHours); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "勤怠管理表"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "開始時刻: "), /*#__PURE__*/ React.createElement("select", { className: "border border-gray-300 rounded p-1 font-roboto", name: "startTime", value: startTime, onChange: (e)=>onChangeStartTime(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, timeOptions.map((time)=>/*#__PURE__*/ React.createElement("option", { key: time, value: time, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "終了時刻: "), /*#__PURE__*/ React.createElement("select", { className: "border border-gray-300 rounded p-1 font-roboto", name: "endTime", value: endTime, onChange: (e)=>onChangeEndTime(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, timeOptions.map((time)=>/*#__PURE__*/ React.createElement("option", { key: time, value: time, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "休憩時間: "), /*#__PURE__*/ React.createElement("select", { className: "border border-gray-300 rounded p-1 font-roboto", name: "breakTime", value: breakTime, onChange: (e)=>onChangeBreakTime(e.target.value), __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, breakOptions.map((breakTimeOption)=>/*#__PURE__*/ React.createElement("option", { key: breakTimeOption, value: breakTimeOption, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, breakTimeOption)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-white rounded font-roboto flex justify-between items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "勤務合計時間: "), /*#__PURE__*/ React.createElement("span", { className: "text-green-500", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, formattedHours)), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), " コピー"))); } function StoryComponent() { const [startTime, setStartTime] = React.useState("09:00"); const [endTime, setEndTime] = React.useState("17:00"); const [breakTime, setBreakTime] = React.useState("01:00"); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { startTime: startTime, endTime: endTime, breakTime: breakTime, onChangeStartTime: setStartTime, onChangeEndTime: setEndTime, onChangeBreakTime: setBreakTime, __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this })); }