function MainComponent() { const [books, setBooks] = React.useState([]); const [cart, setCart] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); React.useEffect(()=>{ async function fetchBooks() { const response = await fetch('/api/books'); const data = await response.json(); setBooks(data); } fetchBooks(); }, []); const addToCart = (book)=>{ setCart((currentCart)=>{ const cartItem = currentCart.find((item)=>item.id === book.id); if (cartItem) { return currentCart.map((item)=>item.id === book.id ? { ...item, quantity: item.quantity + 1 } : item); } else { return [ ...currentCart, { ...book, quantity: 1 } ]; } }); }; const removeFromCart = (bookId)=>{ setCart((currentCart)=>currentCart.reduce((acc, item)=>{ if (item.id === bookId && item.quantity > 1) { acc.push({ ...item, quantity: item.quantity - 1 }); } else if (item.id !== bookId) { acc.push(item); } return acc; }, [])); }; const clearCart = ()=>{ setCart([]); }; const filteredBooks = books.filter((book)=>book.title.toLowerCase().includes(searchTerm.toLowerCase())); const cartCount = cart.reduce((previousValue, currentItem)=>previousValue + currentItem.quantity, 0); const cartTotalPrice = cart.reduce((previousValue, currentItem)=>previousValue + currentItem.price * currentItem.quantity, 0).toFixed(2); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#f8f8f8] text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#0a0a0a] p-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "📚 Book Paradise"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search for books...", onChange: (e)=>setSearchTerm(e.target.value), className: "rounded py-2 px-3 mr-4", name: "search", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffffff] text-[#0366d6] py-2 px-4 rounded relative", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Cart (", cartCount, ")"))), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Browse Books"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, filteredBooks.map((book)=>/*#__PURE__*/ React.createElement("div", { key: book.id, className: "p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.coverImageUrl, alt: `Cover image of ${book.title}`, className: "w-full h-[300px] object-cover mx-auto", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg mt-2", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "By ", book.author), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-3", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, "$", book.price), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(book), className: "bg-[#0366d6] text-white py-1 px-2 rounded", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }, "Add to Cart")))))), cartCount > 0 && /*#__PURE__*/ React.createElement("section", { className: "mb-8 bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Your Cart"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, "Title"), /*#__PURE__*/ React.createElement("th", { className: "hidden md:table-cell", __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, "Author"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "hidden sm:table-cell", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 114, columnNumber: 21 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("tr", { key: item.id, __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 120, columnNumber: 23 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("td", { className: "hidden md:table-cell", __source: { fileName: "", lineNumber: 121, columnNumber: 23 }, __self: this }, item.author), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 122, columnNumber: 23 }, __self: this }, "$", item.price), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 123, columnNumber: 23 }, __self: this }, item.quantity), /*#__PURE__*/ React.createElement("td", { className: "hidden sm:table-cell", __source: { fileName: "", lineNumber: 124, columnNumber: 23 }, __self: this }, "$", (item.price * item.quantity).toFixed(2)), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(item), className: "text-green-600 mr-2", __source: { fileName: "", lineNumber: 126, columnNumber: 25 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeFromCart(item.id), className: "text-red-600", __source: { fileName: "", lineNumber: 132, columnNumber: 25 }, __self: this }, "–"))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-end items-center", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: clearCart, className: "text-red-600 mr-4", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, "Clear Cart"), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, "Total: $", cartTotalPrice)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333333] text-white p-6 text-center", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, "© ", new Date().getFullYear(), " Book Paradise")); }