function BookSearchBar({ onSearchCompleted }) { const [searchTerm, setSearchTerm] = React.useState(""); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const handleSearchSubmit = async (event)=>{ event.preventDefault(); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: `https://books.example.com/search?q=${encodeURIComponent(searchTerm)}` }) }); const data = await response.text(); onSearchCompleted(data); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded font-roboto", name: "searchBook", placeholder: "Search for a book", value: searchTerm, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function BookSearchBarStory() { const handleSearchCompleted = (data)=>{ console.log('Search completed:', data); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BookSearchBar, { onSearchCompleted: handleSearchCompleted, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isLoggingBook, setIsLoggingBook] = React.useState(false); const [searchResults, setSearchResults] = React.useState([]); const handleSearchCompleted = (data)=>{ setSearchResults(JSON.parse(data)); }; if (isLoggingBook) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-white shadow", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLoggingBook(false), __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-lg", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Add a Book"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BookSearchBar, { onSearchCompleted: handleSearchCompleted, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, searchResults.map((book, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.cover, alt: `${book.title} cover`, className: "w-[60px] h-[90px] object-cover", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-gray-600", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, book.author))))))); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-white shadow", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "ml-2 text-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Popular")), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around my-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Books"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Reviews")), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl my-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Popular this week"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/book1.jpg", alt: "Cover of book title 1", className: "w-[120px]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/book2.jpg", alt: "Cover of book title 2", className: "w-[120px] ml-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl my-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "New from Friends"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/book3.jpg", alt: "Cover of book title 3", className: "w-[120px]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/book4.jpg", alt: "Cover of book title 4", className: "w-[120px] ml-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl my-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Popular with Friends"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/book5.jpg", alt: "Cover of book title 5", className: "w-[120px]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/book6.jpg", alt: "Cover of book title 6", className: "w-[120px] ml-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "fixed bottom-4 right-4 bg-blue-500 rounded-full p-4", onClick: ()=>setIsLoggingBook(true), __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-white", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }))); }