function BookRentalDisplay({ coverImage, title, author, rentalPrice, onRent }) { return /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-white rounded-lg border border-gray-200 shadow-md w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "rounded-t-lg w-full h-[50%] object-cover", src: coverImage, alt: `${title} book cover`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 h-[50%] flex flex-col justify-between", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-md font-bold tracking-tight text-gray-900", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-normal text-gray-700 text-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, author)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-md font-bold text-gray-900", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, rentalPrice, "/mes"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onRent(title), className: "text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-1", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Alquilar")))); } function BookRentalDisplayStory() { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-0", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BookRentalDisplay, { coverImage: "path/to/coverImage1.jpg", title: "Book Title One", author: "Author Name One", rentalPrice: "$5", onRent: (title)=>alert(`Renting ${title}`), __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BookRentalDisplay, { coverImage: "path/to/coverImage2.jpg", title: "Book Title Two", author: "Author Name Two", rentalPrice: "$6", onRent: (title)=>alert(`Renting ${title}`), __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-fixed bg-center bg-cover font-poppins", style: { backgroundImage: 'url(https://i.ibb.co/F0s3FHQ/books.jpg)' }, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full text-white p-4", style: { backdropFilter: 'blur(5px)' }, __source: { fileName: "", lineNumber: 6, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 9, columnNumber: 25 }, __self: this }, "Rent"), /*#__PURE__*/ React.createElement("span", { className: "text-yellow-500", __source: { fileName: "", lineNumber: 9, columnNumber: 67 }, __self: this }, "Book")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "text-xl", __source: { fileName: "", lineNumber: 11, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 12, columnNumber: 25 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 16, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mt-2", __source: { fileName: "", lineNumber: 17, columnNumber: 25 }, __self: this }, "Características"), /*#__PURE__*/ React.createElement("li", { className: "mt-2", __source: { fileName: "", lineNumber: 18, columnNumber: 25 }, __self: this }, "Quiénes somos"), /*#__PURE__*/ React.createElement("li", { className: "mt-2", __source: { fileName: "", lineNumber: 19, columnNumber: 25 }, __self: this }, "Ser BookRenter"), /*#__PURE__*/ React.createElement("li", { className: "mt-2", __source: { fileName: "", lineNumber: 20, columnNumber: 25 }, __self: this }, "Política"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-4 p-4 mt-8 mb-8", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(BookRentalDisplay, { coverImage: "path/to/coverImage1.jpg", title: "Libro Uno", author: "Autor Uno", rentalPrice: "$5", onRent: (title)=>alert(`Renting ${title}`), __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(BookRentalDisplay, { coverImage: "path/to/coverImage2.jpg", title: "Libro Dos", author: "Autor Dos", rentalPrice: "$6", onRent: (title)=>alert(`Renting ${title}`), __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(BookRentalDisplay, { coverImage: "path/to/coverImage3.jpg", title: "Libro Tres", author: "Autor Tres", rentalPrice: "$7", onRent: (title)=>alert(`Renting ${title}`), __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(BookRentalDisplay, { coverImage: "path/to/coverImage4.jpg", title: "Libro Cuatro", author: "Autor Cuatro", rentalPrice: "$8", onRent: (title)=>alert(`Renting ${title}`), __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })); }

RentBook

Libro Uno

Libro Dos

Libro Tres

Libro Cuatro