function MainComponent() { const [startTime, setStartTime] = React.useState('09:00'); const [endTime, setEndTime] = React.useState('18:00'); const [breakTime, setBreakTime] = React.useState(60); const [workingHours, setWorkingHours] = React.useState(0); const timeOptions = React.useMemo(()=>{ const options = []; for(let hour = 0; hour < 24; hour++){ for(let minute = 0; minute < 60; minute += 30){ const time = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`; options.push(time); } } return options; }, []); const calculateWorkingHours = React.useCallback(()=>{ const start = new Date(`2024-01-01T${startTime}:00`); const end = new Date(`2024-01-01T${endTime}:00`); const diff = (end - start) / (1000 * 60) - breakTime; setWorkingHours(Math.max(0, diff / 60)); }, [ startTime, endTime, breakTime ]); React.useEffect(()=>{ calculateWorkingHours(); }, [ startTime, endTime, breakTime, calculateWorkingHours ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12 font-sans", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative py-3 sm:max-w-xl sm:mx-auto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "勤怠計算ツール"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 21 }, __self: this }, "出勤時間"), /*#__PURE__*/ React.createElement("select", { name: "startTime", value: startTime, onChange: (e)=>setStartTime(e.target.value), className: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 41, columnNumber: 21 }, __self: this }, timeOptions.map((time)=>/*#__PURE__*/ React.createElement("option", { key: `start-${time}`, value: time, __source: { fileName: "", lineNumber: 48, columnNumber: 25 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, "退出時間"), /*#__PURE__*/ React.createElement("select", { name: "endTime", value: endTime, onChange: (e)=>setEndTime(e.target.value), className: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, timeOptions.map((time)=>/*#__PURE__*/ React.createElement("option", { key: `end-${time}`, value: time, __source: { fileName: "", lineNumber: 63, columnNumber: 25 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, "休憩時間 (分)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "breakTime", value: breakTime, onChange: (e)=>setBreakTime(Number(e.target.value)), className: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "勤務時間数"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-3xl font-bold text-indigo-600", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, workingHours.toFixed(2), " 時間")))))))); }