function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [videos, setVideos] = React.useState([]); const [filterDate, setFilterDate] = React.useState(''); const [filterDuration, setFilterDuration] = React.useState(''); const [filterSubscribers, setFilterSubscribers] = React.useState(''); const [trendingAccounts, setTrendingAccounts] = React.useState([]); const [trendingKeywords, setTrendingKeywords] = React.useState([]); const handleSearch = async ()=>{ try { let url = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${searchTerm}&type=video&key=YOUR_API_KEY`; if (filterDate) url += `&publishedAfter=${filterDate}`; if (filterDuration) url += `&videoDuration=${filterDuration}`; const response = await fetch(url); const data = await response.json(); const filteredVideos = filterSubscribers ? data.items.filter((video)=>video.statistics && video.statistics.subscriberCount >= filterSubscribers) : data.items; setVideos(filteredVideos); } catch (error) { console.error('Error fetching data', error); } }; const fetchTrendingData = async ()=>{ try { const accountsResponse = await fetch('API_URL_FOR_TRENDING_ACCOUNTS'); const trendingAccountsData = await accountsResponse.json(); setTrendingAccounts(trendingAccountsData.items); const keywordsResponse = await fetch('API_URL_FOR_TRENDING_KEYWORDS'); const trendingKeywordsData = await keywordsResponse.json(); setTrendingKeywords(trendingKeywordsData.items); } catch (error) { console.error('Error fetching trending data', error); } }; React.useEffect(()=>{ fetchTrendingData(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "YouTube Search App"), /*#__PURE__*/ React.createElement("input", { name: "search", type: "text", placeholder: "Search YouTube", className: "w-[300px] p-2 border border-gray-300 rounded mb-4", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "filterDate", type: "date", className: "w-[300px] p-2 border border-gray-300 rounded mb-4", value: filterDate, onChange: (e)=>setFilterDate(e.target.value), __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "filterDuration", className: "w-[300px] p-2 border border-gray-300 rounded mb-4", value: filterDuration, onChange: (e)=>setFilterDuration(e.target.value), __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Any duration"), /*#__PURE__*/ React.createElement("option", { value: "short", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Short (< 4 minutes)"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Medium (4-20 minutes)"), /*#__PURE__*/ React.createElement("option", { value: "long", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Long (> 20 minutes)")), /*#__PURE__*/ React.createElement("input", { name: "filterSubscribers", type: "number", placeholder: "Min Subscribers", className: "w-[300px] p-2 border border-gray-300 rounded mb-4", value: filterSubscribers, onChange: (e)=>setFilterSubscribers(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-2 rounded", onClick: handleSearch, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }), " Search"), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Trending Accounts"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, trendingAccounts.map((account)=>/*#__PURE__*/ React.createElement("div", { key: account.id, className: "w-[200px] m-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: account.snippet.thumbnails.default.url, alt: `Account: ${account.snippet.title}`, className: "w-full h-auto", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, account.snippet.title))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Trending Keywords"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, trendingKeywords.map((keyword)=>/*#__PURE__*/ React.createElement("div", { key: keyword, className: "w-[200px] m-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, keyword))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id.videoId, className: "w-[300px] m-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.snippet.thumbnails.default.url, alt: video.snippet.title, className: "w-full h-auto", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, video.snippet.title))))); }