function MainComponent() { const [selectedDates, setSelectedDates] = React.useState(''); const [manager, setManager] = React.useState(''); const [status, setStatus] = React.useState('pending'); const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch('/api/submit-holiday', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ selectedDates, manager }) }); if (response.ok) { setStatus('approved'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "holiday-dates", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Holiday Dates"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", id: "holiday-dates", type: "text", placeholder: "YYYY-MM-DD, YYYY-MM-DD, ...", name: "holidayDates", value: selectedDates, onChange: (e)=>setSelectedDates(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "approval-manager", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Approval Manager"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "approval-manager", name: "approvalManager", value: manager, onChange: (e)=>setManager(e.target.value), __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Select manager"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Manager 1"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Manager 2"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Manager 3")), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Submit"))), status === 'approved' && /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-mono text-lg text-green-600", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Holiday approved, check your calendar for an invite!"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } form { animation: 1s ease-out 0s 1 slideInFromLeft; } `)); }