function MainComponent() { const [startDate, setStartDate] = React.useState(''); const [endDate, setEndDate] = React.useState(''); const [date, setDate] = React.useState(''); const [startTime, setStartTime] = React.useState(''); const [endTime, setEndTime] = React.useState(''); const calculateDateDiff = ()=>{ if (startDate && endDate) { const start = new Date(startDate); const end = new Date(endDate); const diffTime = Math.abs(end - start); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; } return 0; }; const calculateTimeDiff = ()=>{ if (startTime && endTime) { const start = new Date(`2000-01-01T${startTime}:00`); const end = new Date(`2000-01-01T${endTime}:00`); const diffMinutes = Math.floor((end - start) / (1000 * 60)); const hours = Math.floor(diffMinutes / 60); const minutes = diffMinutes % 60; return `${hours}時間${minutes}分`; } return ''; }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans p-6 space-y-6", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "有給申請"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "日付単位の申請"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "startDate", className: "block font-medium", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "開始日"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "startDate", name: "startDate", value: startDate, onChange: (e)=>setStartDate(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "endDate", className: "block font-medium", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "終了日"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "endDate", name: "endDate", value: endDate, onChange: (e)=>setEndDate(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "休暇期間: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium text-blue-600", __source: { fileName: "", lineNumber: 60, columnNumber: 40 }, __self: this }, calculateDateDiff(), "日間")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "時間単位の申請"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "block font-medium", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "date", name: "date", value: date, onChange: (e)=>setDate(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "startTime", className: "block font-medium", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "開始時刻"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "startTime", name: "startTime", value: startTime, onChange: (e)=>setStartTime(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "endTime", className: "block font-medium", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "終了時刻"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "endTime", name: "endTime", value: endTime, onChange: (e)=>setEndTime(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "休暇時間: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium text-blue-600", __source: { fileName: "", lineNumber: 100, columnNumber: 40 }, __self: this }, calculateTimeDiff())))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 font-semibold text-sm bg-blue-500 text-white rounded-md shadow-sm", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, "申請")); }