function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [clinics, setClinics] = React.useState([]); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const handleSearchSubmit = (event)=>{ event.preventDefault(); // Fetch and update clinics data based on searchTerm here }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-semibold text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Buscar Centros de Diagnóstico"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border border-gray-300 rounded overflow-hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "pl-4 pr-2 py-2 w-full", placeholder: "Ingrese el examen solicitado", onChange: handleSearchChange, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 text-white bg-blue-600 hover:bg-blue-700", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, clinics.map((clinic, index)=>/*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-white shadow rounded", key: index, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, clinic.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, clinic.address), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Teléfono: ", clinic.phone), /*#__PURE__*/ React.createElement("a", { href: `http://maps.google.com/?q=${clinic.latitude},${clinic.longitude}`, target: "_blank", className: "text-blue-500 hover:text-blue-600 mt-2 inline-block", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Ver mapa"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 ml-4 bg-green-500 hover:bg-green-600 text-white py-1 px-2 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Agendar cita")))))); }