function MainComponent() { const [employeeData, setEmployeeData] = React.useState({ employeeNumber: '123456', name: '山田太郎', department: '営業部', group: 'Aチーム' }); const [leaveData, setLeaveData] = React.useState({ totalLeave: 20, remainingLeave: 12 }); const ratio = leaveData.remainingLeave / leaveData.totalLeave; const dashArray = `${ratio * 100}, 100`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full lg:flex-row lg:w-3/4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex justify-center items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4 lg:w-1/2 mx-auto mt-10", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-5", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-5", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, "休暇申請"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "当日以降")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", className: "w-full bg-blue-50 text-gray-800 font-bold py-2 px-4 rounded-lg", min: new Date().toISOString().split("T")[0], name: "leave-date", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-5 w-full bg-green-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-green-700", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, "申請提出"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex justify-center items-center mt-5 lg:mt-0 lg:ml-5", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4 lg:w-1/2 bg-white rounded-lg shadow p-5", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-bold font-roboto text-xl mb-5", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "カレンダー"), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://calendar.google.com/calendar/embed?src=YOUR_CALENDAR_ID&ctz=Asia%2FTokyo", className: "w-full h-[500px]", frameBorder: "0", scrolling: "no", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-[300px] bg-white shadow p-5 mt-5 lg:mt-0", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "社員情報"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "社員番号: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 60 }, __self: this }, employeeData.employeeNumber)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "氏名: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 58, columnNumber: 58 }, __self: this }, employeeData.name)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "部署名: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 59, columnNumber: 59 }, __self: this }, employeeData.department)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "グループ名: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 61 }, __self: this }, employeeData.group))), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "残有給日数"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 36 36", className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { className: "text-gray-300", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", fill: "none", stroke: "currentColor", strokeWidth: "3", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "text-green-500", d: `M18 2.0845 a 15.9155 15.9155 0 0 1 0 ${31.831 * ratio} a 15.9155 15.9155 0 0 1 0 -${31.831 * ratio}`, fill: "none", stroke: "currentColor", strokeWidth: "3", strokeDasharray: dashArray, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "18", y: "20.35", className: "text-xs text-black font-roboto", textAnchor: "middle", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, `${leaveData.remainingLeave} / ${leaveData.totalLeave}`))))); }