function MainComponent() { const appointmentTypes = [ 'General Checkup', 'Dentist', 'Cardiologist', 'Pediatrician' ]; const [formData, setFormData] = React.useState({ name: '', email: '', appointmentType: 'General Checkup', date: '', time: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); alert(`Appointment booked: Name: ${formData.name} Email: ${formData.email} Type: ${formData.appointmentType} Date: ${formData.date} Time: ${formData.time}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#f0f4f8] p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white rounded-lg shadow-lg p-6 space-y-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./stethoscope.png", alt: "doctor illustration", className: "w-[100px] h-[100px] object-contain", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto text-center text-[#2c3e50]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Book a Medical Appointment"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#34495e] font-roboto", htmlFor: "name", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1abc9c] focus:border-[#1abc9c] sm:text-sm", type: "text", name: "name", id: "name", value: formData.name, onChange: handleChange, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#34495e] font-roboto", htmlFor: "email", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1abc9c] focus:border-[#1abc9c] sm:text-sm", type: "email", name: "email", id: "email", value: formData.email, onChange: handleChange, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#34495e] font-roboto", htmlFor: "appointmentType", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Type of Appointment"), /*#__PURE__*/ React.createElement("select", { className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1abc9c] focus:border-[#1abc9c] sm:text-sm", name: "appointmentType", id: "appointmentType", value: formData.appointmentType, onChange: handleChange, __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, appointmentTypes.map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, value: type, __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, type)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#34495e] font-roboto", htmlFor: "date", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Preferred Date"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1abc9c] focus:border-[#1abc9c] sm:text-sm", type: "date", name: "date", id: "date", value: formData.date, onChange: handleChange, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#34495e] font-roboto", htmlFor: "time", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Preferred Time"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#1abc9c] focus:border-[#1abc9c] sm:text-sm", type: "time", name: "time", id: "time", value: formData.time, onChange: handleChange, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#1abc9c] hover:bg-[#16a085] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#16a085]", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Book Appointment")))); }