function MainComponent({ toggleMenu, showMenu, navCategories, searchInput, handleSearchInput, searchResults, handleUserProfileClick, user }) { const [localSearchInput, setLocalSearchInput] = React.useState(searchInput); const localHandleSearchInput = (event)=>{ setLocalSearchInput(event.target.value); handleSearchInput(event); }; const localHandleSearchSubmit = (event)=>{ event.preventDefault(); fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(localSearchInput)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>searchResults(data.items)); }; return /*#__PURE__*/ React.createElement("nav", { className: "bg-purple-700 p-4 flex items-center justify-between flex-wrap", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center flex-shrink-0 text-white mr-6", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl tracking-tight", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "MangaVerse")), /*#__PURE__*/ React.createElement("div", { className: "block lg:hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-white flex items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-bars", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Menu"))), /*#__PURE__*/ React.createElement("div", { className: `${showMenu ? 'block' : 'hidden'} w-full block flex-grow lg:flex lg:items-center lg:w-auto`, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm lg:flex-grow", id: "menu", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, navCategories), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: localHandleSearchSubmit, className: "relative", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: localSearchInput, onChange: localHandleSearchInput, className: "border rounded-full pl-8 pr-4 py-2 text-gray-900 w-full", placeholder: "Search mangas...", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-900", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Search")))), /*#__PURE__*/ React.createElement("div", { onClick: handleUserProfileClick, className: "cursor-pointer", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.avatar, alt: "User Profile Avatar", className: "rounded-full w-10 h-10", role: "button", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })))); } function StoryComponent() { const dummyToggleMenu = ()=>{}; const dummyHandleSearchInput = ()=>{}; const dummySearchResults = ()=>{}; const dummyHandleUserProfileClick = ()=>{}; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { toggleMenu: dummyToggleMenu, showMenu: true, navCategories: /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 24 } }, "Home"), searchInput: "", handleSearchInput: dummyHandleSearchInput, searchResults: dummySearchResults, handleUserProfileClick: dummyHandleUserProfileClick, user: { avatar: "user_avatar.png" }, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this })); }