function BookSwipeHeader({ title }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-4xl mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function BookSwipeHeaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BookSwipeHeader, { title: "Book swipe", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [book, setBook] = React.useState({}); const [cart, setCart] = React.useState([]); React.useEffect(()=>{ fetch(`/integrations/book-search/?q=book&fields=*`).then((response)=>response.json()).then((data)=>{ if (data.numFound > 0) { const firstBook = data.docs[0]; setBook({ title: firstBook.title, author: firstBook.author_name[0], image: `https://covers.openlibrary.org/b/id/${firstBook.cover_i}-L.jpg` }); } }); }, []); const handleSwipe = (direction)=>{ if (direction === "left" || direction === "right") { fetch(`/integrations/book-search/?q=nextbook&fields=*`).then((response)=>response.json()).then((data)=>{ if (data.numFound > 0) { const nextBook = data.docs[0]; setBook({ title: nextBook.title, author: nextBook.author_name[0], image: `https://covers.openlibrary.org/b/id/${nextBook.cover_i}-L.jpg` }); } }); } else if (direction === "up") { setCart([ ...cart, book ]); console.log(`Added "${book.title}" to the shopping cart`); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BookSwipeHeader, { title: "Book swipe", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[400px] bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.image, alt: `Cover of the book ${book.title}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col justify-end p-4 bg-gradient-to-t from-[#000000aa] to-transparent text-white", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, book.author))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-crimson-text", onClick: ()=>handleSwipe("left"), __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "👈"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-crimson-text", onClick: ()=>handleSwipe("right"), __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "👉"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-crimson-text", onClick: ()=>handleSwipe("up"), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "👆"))); }