function MainComponent() { const modalButtonRef = React.useRef(null); const [isOpen, setIsOpen] = React.useState(false); const openModal = ()=>{ setIsOpen(true); }; const closeModal = ()=>{ setIsOpen(false); }; const modalClass = isOpen ? 'fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full' : 'hidden'; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { ref: modalButtonRef, onClick: openModal, className: "px-4 py-2 mb-4 text-white transition duration-150 ease-in-out bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Ver Bolsos y Accesorios"), /*#__PURE__*/ React.createElement("div", { className: modalClass, "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "hidden sm:inline-block sm:align-middle sm:h-screen", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, ""), /*#__PURE__*/ React.createElement("div", { className: "inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sm:flex sm:items-start", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-blue-100 rounded-full sm:mx-0 sm:h-10 sm:w-10", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 12h14M12 5l7 7-7 7", __source: { fileName: "", lineNumber: 28, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium leading-6 text-gray-900", id: "modal-title", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this }, "Bolsos y Accesorios"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this }, "Descubre nuestra selección exclusiva de bolsos y accesorios. Encuentra el complemento perfecto para cada ocasión."))))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeModal, className: "w-full px-4 py-2 text-base font-medium text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Cerrar"), /*#__PURE__*/ React.createElement("button", { onClick: closeModal, className: "w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Cancelar")))))); }