function DoctorCard({ name, specialty, onViewSlots }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-md text-blue-500 text-xl", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, specialty))), /*#__PURE__*/ React.createElement("button", { onClick: onViewSlots, className: "mt-4 w-full rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Voir les créneaux disponibles")); } function DoctorCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DoctorCard, { name: "Dr. Sophie Martin", specialty: "Cardiologie", onViewSlots: ()=>alert("Voir les créneaux"), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DoctorCard, { name: "Dr. Thomas Bernard", specialty: "Pédiatrie", onViewSlots: ()=>alert("Voir les créneaux"), __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this })); } function AppointmentForm() { const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", phone: "", date: "", time: "", symptoms: "" }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto p-6 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Prendre un rendez-vous"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "firstName", value: formData.firstName, onChange: handleChange, placeholder: "Prénom", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "lastName", value: formData.lastName, onChange: handleChange, placeholder: "Nom", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, placeholder: "Email", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleChange, placeholder: "Téléphone", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: formData.date, onChange: handleChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "time", name: "time", value: formData.time, onChange: handleChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "symptoms", value: formData.symptoms, onChange: handleChange, placeholder: "Décrivez vos symptômes", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 h-32", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Confirmer le rendez-vous"))); } function AppointmentFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-8", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AppointmentForm, { __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this })); } function MainComponent() { const [doctors] = useState([ { id: 1, name: "Dr. Marie Laurent", specialty: "Médecin généraliste", image: "/doctor1.jpg", availableSlots: [ { date: "2024-02-20", time: "14:30", urgent: true }, { date: "2024-02-21", time: "09:00", urgent: false } ] }, { id: 2, name: "Dr. Thomas Bernard", specialty: "Cardiologue", image: "/doctor2.jpg", availableSlots: [ { date: "2024-02-20", time: "16:00", urgent: true }, { date: "2024-02-22", time: "11:30", urgent: false } ] } ]); const urgentSlots = doctors.flatMap((doctor)=>doctor.availableSlots.filter((slot)=>slot.urgent).map((slot)=>({ ...slot, doctor }))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-6", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto text-[#2c3e50]", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Centre Médical"), /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-[#e74c3c] font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Créneaux Disponibles Suite aux Désistements"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, urgentSlots.map((slot, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg shadow-md border-l-4 border-[#e74c3c]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, slot.doctor.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, slot.date, " à ", slot.time), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-[#e74c3c] text-white px-4 py-2 rounded-md hover:bg-[#c0392b] transition-colors w-full", onClick: ()=>{}, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Réserver"))))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto text-[#2c3e50]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Nos Médecins"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, doctors.map((doctor)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))); }