function MainComponent({ logo, menuOpen, toggleMenu, searchQuery, setSearchQuery, searchPlaceholder, searchResults, fetchingError }) { const handleKeyDown = (e)=>{ if (e.key === 'Enter') { setSearchQuery(e.target.value); } }; return /*#__PURE__*/ React.createElement("nav", { className: "bg-[#6A0DAD] text-white", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, logo), /*#__PURE__*/ React.createElement("button", { className: "md:hidden", onClick: toggleMenu, "aria-label": "Toggle menu", "aria-expanded": menuOpen, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", tabIndex: 0, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", tabIndex: 0, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", tabIndex: 0, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "search", type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "rounded-full bg-white text-black p-1", "aria-label": "Search mangas", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { onClick: toggleMenu, className: "cursor-pointer", tabIndex: 0, "aria-label": "User profile", role: "button", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/user-avatar.png", alt: "User Profile Avatar", className: "h-8 w-8 rounded-full", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }))), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex flex-col items-start space-y-2 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", tabIndex: 0, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", tabIndex: 0, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", tabIndex: 0, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 pt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, fetchingError && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 27 }, __self: this }, "Error fetching results. Please try again."), !fetchingError && searchResults?.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.link, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, tabIndex: 0, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, result.title))))); } function StoryComponent() { const [menuOpen, setMenuOpen] = React.useState(false); const [searchQuery, setSearchQuery] = React.useState(""); const [searchResults, setSearchResults] = React.useState(null); const [fetchingError, setFetchingError] = React.useState(null); React.useEffect(()=>{ if (searchQuery !== "") { fetch(`/integrations/google-search/search?q=${searchQuery.replace(/\s+/g, '+')}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setFetchingError(null); setSearchResults(data.items); }).catch((error)=>{ console.error('Error fetching search results:', error); setFetchingError(error); setSearchResults(null); }); } }, [ searchQuery ]); return /*#__PURE__*/ React.createElement(MainComponent, { logo: "MangaVerse", menuOpen: menuOpen, toggleMenu: ()=>setMenuOpen(!menuOpen), searchQuery: searchQuery, setSearchQuery: setSearchQuery, searchPlaceholder: "Search mangas...", searchResults: searchResults, fetchingError: fetchingError, __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }); }