function WeeklyScheduleDisplay({ date, onChange }) { return /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg font-roboto", type: "date", name: "date", value: date, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function WeeklyScheduleDisplayStory() { const [date, setDate] = React.useState(''); const handleDateChange = (event)=>{ setDate(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WeeklyScheduleDisplay, { date: date, onChange: handleDateChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = async (e)=>{ e.preventDefault(); const form = e.target; const formData = new FormData(form); const data = { name: formData.get("name"), email: formData.get("email"), phone: formData.get("phone"), date: formData.get("date"), time: formData.get("time"), barber: formData.get("barber") }; const event = { summary: `Haircut with ${data.barber}`, location: 'Barber Shop', description: 'Haircut appointment', start: { dateTime: `${data.date}T${data.time}:00`, timeZone: 'America/Los_Angeles' }, end: { dateTime: `${data.date}T${formatEndTime(data.time)}:00`, timeZone: 'America/Los_Angeles' }, attendees: [ { email: data.email } ], reminders: { useDefault: false, overrides: [ { method: 'email', minutes: 24 * 60 }, { method: 'popup', minutes: 10 } ] } }; const response = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', { method: 'POST', headers: { Authorization: `Bearer ${yourGoogleOAuthToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify(event) }); const result = await response.json(); console.log(result); }; const formatEndTime = (startTime)=>{ const [hours, minutes] = startTime.split(':'); const endHours = (parseInt(hours) + 1).toString().padStart(2, '0'); return `${endHours}:${minutes}`; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Barber Appointment"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg font-roboto", type: "text", name: "name", placeholder: "Your Name", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg font-roboto", type: "email", name: "email", placeholder: "Your Email", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Phone"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg font-roboto", type: "tel", name: "phone", placeholder: "Your Phone Number", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg font-roboto", type: "date", name: "date", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg font-roboto", type: "time", name: "time", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Barber"), /*#__PURE__*/ React.createElement("select", { className: "w-full px-3 py-2 border rounded-lg font-roboto", name: "barber", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "barber1", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Barber 1"), /*#__PURE__*/ React.createElement("option", { value: "barber2", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Barber 2"), /*#__PURE__*/ React.createElement("option", { value: "barber3", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Barber 3"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-lg font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Book Appointment")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-center", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[600px] h-[400px]", src: "weekly-schedule.png", alt: "Weekly schedule visualization", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this })))); }