function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [books, setBooks] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); // Fetch books on component mount React.useEffect(()=>{ fetchBooks(); }, []); const fetchBooks = async ()=>{ try { setLoading(true); const response = await fetch("/api/list_books", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ search: searchTerm }) }); if (!response.ok) { throw new Error(`Error fetching books: ${response.status} ${response.statusText}`); } const data = await response.json(); setBooks(data.books || []); } catch (error) { console.error("Error fetching books:", error); setError("No se pudieron cargar los libros"); } finally{ setLoading(false); } }; // Search books when search term changes React.useEffect(()=>{ const timeoutId = setTimeout(()=>{ fetchBooks(); }, 300); // Debounce search return ()=>clearTimeout(timeoutId); }, [ searchTerm ]); const handleSearchChange = (value)=>{ setSearchTerm(value); }; const formatPrice = (price)=>{ return new Intl.NumberFormat("es-AR", { style: "currency", currency: "ARS" }).format(price); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#F5E6D3] to-[#E8D5B7] p-6", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-marker-felt text-[#8B4513] mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "📚 Libros de Segunda Mano"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#8B4513]/80 font-marker-felt", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Encuentra tu próxima lectura favorita")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-marker-felt text-[#8B4513] mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Libros Disponibles"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Buscar libros por título, autor o ISBN...", value: searchTerm, onChange: (e)=>handleSearchChange(e.target.value), className: "w-full px-4 py-3 bg-transparent border-b-2 border-[#8B4513]/30 text-[#8B4513] placeholder-[#8B4513]/50 focus:outline-none focus:border-[#8B4513] font-marker-felt transition-colors", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-[#8B4513]/50", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-[#8B4513] mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-marker-felt text-[#8B4513]", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Cargando libros...")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-marker-felt", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, error)), !loading && !error && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, books.length > 0 ? books.map((book)=>/*#__PURE__*/ React.createElement("div", { key: book.id, className: "bg-white/80 backdrop-blur-sm rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden cursor-pointer transform hover:scale-105", onClick: ()=>window.location.href = `/book/${book.id}`, __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-[3/4] bg-gray-200 relative overflow-hidden", __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, book.cover_image ? /*#__PURE__*/ React.createElement("img", { src: book.cover_image, alt: book.title, className: "w-full h-full object-cover", onError: (e)=>{ e.target.style.display = "none"; e.target.nextSibling.style.display = "flex"; }, __source: { fileName: "", lineNumber: 119, columnNumber: 23 }, __self: this }) : null, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#8B4513]/10 flex items-center justify-center", style: { display: book.cover_image ? "none" : "flex" }, __source: { fileName: "", lineNumber: 129, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book text-4xl text-[#8B4513]/50", __source: { fileName: "", lineNumber: 133, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2", __source: { fileName: "", lineNumber: 137, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded-full text-xs font-bold ${book.status === "available" ? "bg-green-500 text-white" : "bg-red-500 text-white"}`, __source: { fileName: "", lineNumber: 138, columnNumber: 23 }, __self: this }, book.status === "available" ? "Disponible" : "Vendido"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-[#8B4513] text-lg mb-2 line-clamp-2 font-marker-felt", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#8B4513]/80 text-sm mb-2 font-marker-felt", __source: { fileName: "", lineNumber: 155, columnNumber: 21 }, __self: this }, "por ", book.author), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-[#8B4513]/10 text-[#8B4513] px-2 py-1 rounded font-marker-felt", __source: { fileName: "", lineNumber: 161, columnNumber: 23 }, __self: this }, book.condition)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 167, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#8B4513] font-marker-felt", __source: { fileName: "", lineNumber: 168, columnNumber: 23 }, __self: this }, formatPrice(book.price)), book.original_price && book.original_price > book.price && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 line-through font-marker-felt", __source: { fileName: "", lineNumber: 173, columnNumber: 27 }, __self: this }, formatPrice(book.original_price))), /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-xs text-[#8B4513]/60 font-marker-felt", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }, book.isbn && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 181, columnNumber: 37 }, __self: this }, "ISBN: ", book.isbn), book.publication_year && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 183, columnNumber: 25 }, __self: this }, "Año: ", book.publication_year))))) : /*#__PURE__*/ React.createElement("div", { className: "col-span-full text-center py-12", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-open text-6xl text-[#8B4513]/30 mb-4", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-marker-felt text-[#8B4513] mb-2", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, "No se encontraron libros"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8B4513]/60 font-marker-felt", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, searchTerm ? `No hay libros que coincidan con "${searchTerm}"` : "No hay libros disponibles en este momento"))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-6 right-6", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/create-book", className: "bg-[#8B4513] text-white p-4 rounded-full shadow-lg hover:bg-[#A0522D] transition-colors", title: "Agregar nuevo libro", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-xl", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 217, columnNumber: 7 }, __self: this }, ` .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } `)); }