function MainComponent() { const [videoData, setVideoData] = React.useState([]); const [trendingData, setTrendingData] = React.useState([]); const [userPreferences, setUserPreferences] = React.useState({}); const [liveStreamData, setLiveStreamData] = React.useState([]); const [moderationStatus, setModerationStatus] = React.useState(''); React.useEffect(()=>{ fetchRecommendedVideos(); fetchTrendingVideos(); fetchUserPreferences(); fetchLiveStreams(); }, []); const fetchRecommendedVideos = ()=>{ setVideoData([ { id: 1, title: "AI-Powered Video Title 1", creator: "AI Creator 1", views: "1M", age: "2 days ago" }, { id: 2, title: "AI-Powered Video Title 2", creator: "AI Creator 2", views: "2M", age: "1 day ago" }, { id: 3, title: "AI-Powered Video Title 3", creator: "AI Creator 3", views: "500K", age: "3 days ago" }, { id: 4, title: "AI-Powered Video Title 4", creator: "AI Creator 4", views: "750K", age: "1 day ago" } ]); }; const fetchTrendingVideos = ()=>{ setTrendingData([ { id: 5, title: "Trending Video Title 1", creator: "Trending Creator 1", views: "5M", age: "1 day ago" }, { id: 6, title: "Trending Video Title 2", creator: "Trending Creator 2", views: "4M", age: "2 days ago" }, { id: 7, title: "Trending Video Title 3", creator: "Trending Creator 3", views: "3M", age: "1 day ago" }, { id: 8, title: "Trending Video Title 4", creator: "Trending Creator 4", views: "2M", age: "3 days ago" } ]); }; const fetchUserPreferences = ()=>{ setUserPreferences({ favoriteCategories: [ "Tech", "Science", "Entertainment" ], watchHistory: [ "Video A", "Video B", "Video C" ] }); }; const fetchLiveStreams = ()=>{ setLiveStreamData([ { id: 9, title: "Live Tech Talk", creator: "Tech Guru", viewers: "10K" }, { id: 10, title: "Live Gaming Stream", creator: "Pro Gamer", viewers: "50K" } ]); }; const handleVideoUpload = (e)=>{ e.preventDefault(); setModerationStatus('Moderating...'); setTimeout(()=>{ setModerationStatus('Video approved and optimized by AI!'); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white py-4 shadow-md", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "AITube"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-200", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-200", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "Trending")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-200", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "Live")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-200", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, "Create")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-blue-200", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, "Profile")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Recommended for You"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, videoData.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/video-thumbnail-${video.id}.jpg`, alt: `AI-recommended video thumbnail ${video.id}`, className: "w-full h-40 object-cover", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, video.creator), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, video.views, " views • ", video.age)))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Trending Now"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, trendingData.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/video-thumbnail-${video.id}.jpg`, alt: `Trending video thumbnail ${video.id}`, className: "w-full h-40 object-cover", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, video.creator), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, video.views, " views • ", video.age)))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Live Now"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, liveStreamData.map((stream)=>/*#__PURE__*/ React.createElement("div", { key: stream.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/live-thumbnail-${stream.id}.jpg`, alt: `Live stream thumbnail ${stream.id}`, className: "w-full h-40 object-cover", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, stream.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, stream.creator), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, stream.viewers, " live viewers"), /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-red-500 text-white text-xs px-2 py-1 rounded mt-2", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, "LIVE")))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Creator Tools"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Upload Your Video"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleVideoUpload, __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "Video Title"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { id: "description", name: "description", rows: "3", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "video", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, "Video File"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "video", name: "video", accept: "video/*", className: "mt-1 block w-full", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "Upload Video")), moderationStatus && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-green-600 font-semibold", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, moderationStatus)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-6 mt-12", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 text-center", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "© 2023 AITube. All rights reserved."), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "Powered by advanced AI for content recommendation, real-time moderation, and personalized user interaction")))); }