function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [thumbnails, setThumbnails] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [generationTime, setGenerationTime] = React.useState(null); const [generationPercentage, setGenerationPercentage] = React.useState(0); const [generationComplete, setGenerationComplete] = React.useState(false); React.useEffect(()=>{ let interval; if (isLoading) { const startTime = Date.now(); interval = setInterval(()=>{ setGenerationPercentage((oldPercentage)=>{ const currentTime = Date.now(); const timeElapsed = (currentTime - startTime) / 1000; setGenerationTime(timeElapsed.toFixed(2)); if (oldPercentage < 100) { return oldPercentage + 10; } clearInterval(interval); setGenerationComplete(true); return 100; }); }, 1000); } else { setGenerationPercentage(0); setGenerationTime(null); } return ()=>clearInterval(interval); }, [ isLoading ]); const handleSearch = async (event)=>{ event.preventDefault(); setIsLoading(true); setGenerationComplete(false); setThumbnails([]); const generatedImages = await fetch(`https://api.example.com/generate?query=${encodeURIComponent(searchTerm)}`).then((response)=>response.json()).then((images)=>{ setIsLoading(false); return images; }).catch((error)=>{ console.error("Failed to load images", error); setIsLoading(false); }); setThumbnails(generatedImages.map((image, index)=>{ return { src: image.url, title: `AI Generated Image ${index + 1}`, channel: "AI Channel", views: "Unknown", timestamp: "Just now" }; })); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center border-b border-[#e2e2e2] pb-3", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-600", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars fa-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/miyabideo-logo.png", alt: "Miyabideo Logo", className: "w-[100px] h-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow mx-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex items-center", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search", className: "w-full px-4 py-2 border border-[#d3d3d3] rounded-l-md focus:outline-none", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-red-600 text-white px-4 py-2 rounded-r-md", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#606060]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#606060]", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-th", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#606060]", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[32px] h-[32px] overflow-hidden rounded-full", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/miyabideo-user-icon.png", alt: "Miyabideo User Icon", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "flex mt-6", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-[240px] border-r border-[#e2e2e2] pr-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-4 text-[#606060]", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, "Home"))), /*#__PURE__*/ React.createElement("li", { className: "mb-4 text-[#606060]", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/trending", className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, "Trending"))), /*#__PURE__*/ React.createElement("li", { className: "mb-4 text-[#606060]", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/subscriptions", className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "Subscriptions"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow ml-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Recommended"), isLoading && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-center font-semibold mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Generating thumbnails with Dall-E... ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 114, columnNumber: 98 }, __self: this }), " Generation Time: ", generationTime || "Calculating", " seconds ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 114, columnNumber: 163 }, __self: this }), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 114, columnNumber: 205 }, __self: this }), "Generation Percentage: ", generationPercentage, "%"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 w-full h-4", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-4", style: { width: `${generationPercentage}%` }, __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }))), generationComplete && !isLoading && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-center font-semibold mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Generation complete! ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500", __source: { fileName: "", lineNumber: 120, columnNumber: 82 }, __self: this })), thumbnails.map((thumbnail, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "max-w-sm mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: thumbnail.src, alt: `Dall-E Generated Thumbnail ${index + 1}`, className: "w-full h-auto object-cover mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, thumbnail.title), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, thumbnail.channel, " • ", thumbnail.views, " views • ", thumbnail.timestamp)))), !isLoading && thumbnails.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center text-lg font-semibold", __source: { fileName: "", lineNumber: 129, columnNumber: 53 }, __self: this }, "Enter a search term to generate thumbnails with Dall-E.")))); }