function MainComponent() { const [activeNav, setActiveNav] = React.useState('home'); const [searchResults, setSearchResults] = React.useState([]); const [searchLoading, setSearchLoading] = React.useState(false); const [currentPage, setCurrentPage] = React.useState(1); const itemsPerPage = 4; const totalPages = Math.ceil(searchResults.length / itemsPerPage); const navOptions = [ { name: 'home', label: "Home", icon: 'fa-magnifying-glass' }, { name: 'discover', label: "Discover", icon: 'fa-compass' }, { name: 'trending', label: "Trending", icon: 'fa-chart-line' }, { name: 'genres', label: "Genres", icon: 'fa-layer-group' }, { name: 'favorites', label: "Favorites", icon: 'fa-heart' }, { name: 'account', label: "Account", icon: 'fa-user' } ]; const handleNavChange = (name)=>()=>{ setActiveNav(name); }; const navButtons = navOptions.map((nav)=>/*#__PURE__*/ React.createElement("button", { key: nav.name, onClick: handleNavChange(nav.name), "aria-label": nav.label, className: `font-roboto px-3 py-2 hover:bg-[#F0F8FF] rounded transition-transform duration-150 ease-in-out ${activeNav === nav.name ? 'bg-[#F5F5F5] text-[#ff4500]' : 'bg-transparent text-white'}`, __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { "aria-hidden": "true", className: `fa ${nav.icon} pr-2`, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), nav.label)); const handleSearch = async (e)=>{ e.preventDefault(); const searchTerm = e.currentTarget.elements.search.value; if (searchTerm.trim() !== '') { setSearchLoading(true); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchTerm)}`, { method: 'GET' }); const data = await response.json(); setSearchResults(data.items); } catch (error) { setSearchResults([]); } setSearchLoading(false); } }; const handlePagination = (direction)=>{ setCurrentPage((currentPage)=>{ if (direction === 'prev' && currentPage > 1) { return currentPage - 1; } else if (direction === 'next' && currentPage < totalPages) { return currentPage + 1; } return currentPage; }); }; let content; if (searchLoading) { content = /*#__PURE__*/ React.createElement("div", { className: "animate-pulse w-full p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#E0E0E0] h-[250px] rounded", role: "status", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this })); } else { content = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search animations...", autoComplete: "on", "aria-label": "Search animations", className: "w-full p-3 rounded-md border-2 border-gray-300 font-roboto focus:border-[#ff4500] focus:ring-2 focus:ring-[#ff4500]", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, searchResults.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full p-4 bg-white rounded-md overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.image, alt: result.title, className: "w-full h-56 object-cover", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute inset-0 w-full h-full flex items-center justify-center bg-black bg-opacity-40 opacity-0 hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-play-circle fa-3x text-white", "aria-hidden": "true", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg text-gray-900", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, result.snippet))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center my-4", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-sm rounded-md text-white bg-[#ff4500] hover:bg-[#ff6347] font-roboto transition-colors", disabled: currentPage === 1, onClick: ()=>handlePagination('prev'), "aria-label": "Go to previous page", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-sm rounded-md text-white bg-[#ff4500] hover:bg-[#ff6347] font-roboto transition-colors", disabled: currentPage === totalPages, onClick: ()=>handlePagination('next'), "aria-label": "Go to next page", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Next"))); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 135, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center p-4 bg-[#1E90FF]", __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, navButtons), /*#__PURE__*/ React.createElement("main", { className: "p-4", "aria-live": "polite", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, content)); }