function TikTokFeed({ initialKeywords = "fyp", initialRegion = "us" }) { const [posts, setPosts] = React.useState([]); const [selectedVideo, setSelectedVideo] = React.useState(null); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const fetchPosts = async (keywords, region)=>{ if (!keywords.trim()) return; setLoading(true); setError(null); try { const response = await fetch("/api/tiktok-feed", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ keywords, region }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); if (result?.data?.videos) { setPosts(result.data.videos); } else { console.error("Unexpected API response structure:", result); setError("Unable to load videos. Invalid response format."); setPosts([]); } } catch (err) { setError("Unable to load TikTok feed. Please try again later."); console.error(err); setPosts([]); } finally{ setLoading(false); } }; React.useEffect(()=>{ fetchPosts(initialKeywords, initialRegion); }, [ initialKeywords, initialRegion ]); const handleCardClick = (post)=>{ setSelectedVideo(post); }; const closeModal = ()=>{ setSelectedVideo(null); }; const VideoModal = ({ video, onClose })=>{ if (!video) return null; const handleBackgroundClick = (e)=>{ if (e.target === e.currentTarget) { onClose(); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4", onClick: handleBackgroundClick, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-white dark:bg-gray-800 rounded-lg w-full max-w-lg h-[80vh] flex flex-col", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 z-10", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times text-xl", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full aspect-[9/16] relative bg-black rounded-lg overflow-hidden mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.cover, alt: video.title, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: `https://www.tiktok.com/@user/video/${video.video_id}`, target: "_blank", rel: "noopener noreferrer", className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 hover:bg-opacity-40 transition-opacity", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-white text-black px-4 py-2 rounded-full hover:bg-gray-100 transition-colors text-sm font-medium", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, "Watch on TikTok"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-play-circle mr-1", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }), video.video_id), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-globe mr-1", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }), video.region)))))); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-white dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loader", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this })) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, error) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.aweme_id, onClick: ()=>handleCardClick(post), className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden cursor-pointer transform transition-transform hover:scale-[1.02] hover:shadow-lg", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video relative", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.cover, alt: post.title || "TikTok video thumbnail", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-opacity flex items-center justify-center", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-play text-white text-3xl opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter text-sm mb-2 line-clamp-2", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, post.title || "No description available"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-sm text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center mr-4", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-play-circle mr-1", __source: { fileName: "", lineNumber: 154, columnNumber: 21 }, __self: this }), post.video_id), /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-globe mr-1", __source: { fileName: "", lineNumber: 158, columnNumber: 21 }, __self: this }), post.region)))))), selectedVideo && /*#__PURE__*/ React.createElement(VideoModal, { video: selectedVideo, onClose: closeModal, __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, ` .loader { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: #09f; animation: spin 1s ease infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); } function TikTokFeedStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 197, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TikTokFeed, { initialKeywords: "fyp", initialRegion: "us", __source: { fileName: "", lineNumber: 198, columnNumber: 7 }, __self: this })); } function MainComponent() { const [state, setState] = useState({ generatedImage: null, prompt: "", loading: false, error: null, topText: "", bottomText: "", createdMemes: [], fontSize: 32 }); const generateImage = async ()=>{ if (!state.prompt) return; setState((prev)=>({ ...prev, loading: true, error: null })); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(state.prompt)}`, { method: "GET", headers: { "Content-Type": "application/json" } }); if (response.status === 429) { throw new Error("Whoa there! Too many requests. Take a breather and try again in a moment."); } if (!response.ok) { throw new Error(`Failed to generate image. Please try again.`); } const data = await response.json(); if (data && data.data && data.data[0]) { setState((prev)=>({ ...prev, generatedImage: data.data[0], loading: false, error: null })); } else { throw new Error("No image received from generator"); } } catch (err) { console.error("Image generation error:", err); setState((prev)=>({ ...prev, error: err.message || "Failed to generate image. Please try again.", loading: false })); } }; const saveMeme = ()=>{ if (!state.generatedImage) return; const newMeme = { id: `meme-${Date.now()}`, imageUrl: state.generatedImage, topText: state.topText, bottomText: state.bottomText, prompt: state.prompt, fontSize: state.fontSize, timestamp: Date.now() }; setState((prev)=>({ ...prev, createdMemes: [ newMeme, ...prev.createdMemes ], generatedImage: null, topText: "", bottomText: "", prompt: "" })); }; const downloadMeme = ()=>{ if (!state.generatedImage) { setState((prev)=>({ ...prev, error: "No image to download!" })); return; } const memeContainer = document.createElement("div"); memeContainer.style.position = "relative"; memeContainer.style.display = "inline-block"; try { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); ctx.fillStyle = "white"; ctx.strokeStyle = "black"; ctx.lineWidth = Math.max(canvas.width * 0.004, 4); ctx.font = `bold ${canvas.height * 0.1}px Impact`; ctx.textAlign = "center"; const drawText = (text, y)=>{ if (!text) return; const uppercase = text.toUpperCase(); ctx.strokeText(uppercase, canvas.width / 2, y); ctx.fillText(uppercase, canvas.width / 2, y); }; drawText(state.topText, canvas.height * 0.15); drawText(state.bottomText, canvas.height * 0.9); try { const link = document.createElement("a"); link.download = `meme-${Date.now()}.png`; link.href = canvas.toDataURL("image/png"); document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (err) { console.error("Download link creation error:", err); setState((prev)=>({ ...prev, error: "Failed to create download link. Please try again." })); } }; img.onerror = ()=>{ console.error("Image loading failed"); setState((prev)=>({ ...prev, error: "Failed to load image for download. Please try again." })); }; img.src = state.generatedImage; } catch (err) { console.error("Download error:", err); setState((prev)=>({ ...prev, error: "Failed to download meme. Please try again." })); } }; const WindowBox = ({ title, children })=>/*#__PURE__*/ React.createElement("div", { className: "m-4 border-2 border-[#848484] bg-[#c0c0c0] rounded shadow-lg transform hover:skew-x-1", __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000080] text-white p-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-[system-ui] glitch", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-4 h-4 bg-[#c0c0c0] border border-[#848484] text-black text-xs animate-pulse", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, "_"), /*#__PURE__*/ React.createElement("button", { className: "w-4 h-4 bg-[#c0c0c0] border border-[#848484] text-black text-xs animate-bounce", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, "□"), /*#__PURE__*/ React.createElement("button", { className: "w-4 h-4 bg-[#c0c0c0] border border-[#848484] text-black text-xs animate-spin", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, "×"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 glitch-content", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, children)); if (state.error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#008080] p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#000080] mb-4 text-center", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "Error.exe"), /*#__PURE__*/ React.createElement("p", { className: "text-red-600 mb-4 text-center", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, state.error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "w-full py-2 bg-[#000080] text-white border-2 border-[#848484] hover:bg-[#0000a0]", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "Restart Program"))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#008080] p-4", __source: { fileName: "", lineNumber: 196, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block bg-[#000080] border-2 border-[#848484] rounded shadow-lg p-4 mb-6 text-center hover:bg-[#0000a0] transition-colors", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-white font-bold mb-2", style: { textShadow: "2px 2px 0 #ff0000, -2px -2px 0 #00ff00" }, __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, "The Internet Was A Mistake"), /*#__PURE__*/ React.createElement("div", { className: "text-[#c0c0c0] text-lg italic", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, "But we're making it worse...")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded p-6 mb-6", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl text-[#000080] text-center mb-4", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, "AI Meme Generator 9000"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 219, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: state.prompt, onChange: (e)=>setState((prev)=>({ ...prev, prompt: e.target.value })), placeholder: "Describe your crazy meme image...", className: "flex-1 px-4 py-2 border-2 border-[#848484]", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: state.loading || !state.prompt, className: `px-6 py-2 ${state.loading ? "bg-[#848484]" : "bg-[#000080]"} text-white border-2 border-[#848484] hover:bg-[#0000a0]`, __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, state.loading ? "Generating..." : "Generate Image"))), state.loading && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded shadow-lg p-4 mb-6", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000080] text-white p-2 mb-2", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "Loading.exe"), /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-[#848484] border-2 border-[#c0c0c0]", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading-bar h-full bg-[#000080]", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff0000] border-2 border-[#848484] rounded shadow-lg p-2 mb-4 text-center", style: { animation: "blink 1s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, "WARNING: MEME GENERATION IN PROGRESS"))), state.error && /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded shadow-lg p-4 mb-6", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000080] text-white p-2 mb-2", __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this }, "Error"), /*#__PURE__*/ React.createElement("p", { className: "text-red-600", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, error)), state.generatedImage && /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#848484] p-4", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-[300px] mx-auto", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: state.generatedImage, alt: "Generated meme", className: "w-full h-auto border-2 border-[#848484]", onError: ()=>{ setState((prev)=>({ ...prev, error: "Failed to load the generated image. Please try again." })); }, __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }), state.topText && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-0 right-0 text-center px-2", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: `${state.fontSize}px`, textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", color: "white", fontFamily: "Impact, sans-serif", textTransform: "uppercase", lineHeight: "1.2" }, __source: { fileName: "", lineNumber: 288, columnNumber: 23 }, __self: this }, state.topText)), state.bottomText && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 left-0 right-0 text-center px-2", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: `${state.fontSize}px`, textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", color: "white", fontFamily: "Impact, sans-serif", textTransform: "uppercase", lineHeight: "1.2" }, __source: { fileName: "", lineNumber: 306, columnNumber: 23 }, __self: this }, state.bottomText))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: state.topText, onChange: (e)=>setState((prev)=>({ ...prev, topText: e.target.value })), placeholder: "Top text", className: "w-full p-2 border-2 border-[#848484]", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: state.bottomText, onChange: (e)=>setState((prev)=>({ ...prev, bottomText: e.target.value })), placeholder: "Bottom text", className: "w-full p-2 border-2 border-[#848484]", __source: { fileName: "", lineNumber: 334, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2", __source: { fileName: "", lineNumber: 348, columnNumber: 21 }, __self: this }, "Text Size: ", state.fontSize, "px"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "20", max: "60", value: state.fontSize, onChange: (e)=>setState((prev)=>({ ...prev, fontSize: parseInt(e.target.value) })), className: "w-full", __source: { fileName: "", lineNumber: 351, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: downloadMeme, className: "w-full p-2 mt-4 bg-[#000080] text-white border-2 border-[#848484] hover:bg-[#0000a0]", __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this }, "💾 Download Meme")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 377, columnNumber: 11 }, __self: this }, state.createdMemes.map((meme)=>/*#__PURE__*/ React.createElement("div", { key: meme.id, className: "bg-[#c0c0c0] border-2 border-[#848484] p-2", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 383, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: meme.imageUrl, alt: "Created meme", className: "w-full h-auto", __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 p-2 text-center", __source: { fileName: "", lineNumber: 389, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white stroke-black", style: { textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", fontSize: `${meme.fontSize || 32}px` }, __source: { fileName: "", lineNumber: 390, columnNumber: 21 }, __self: this }, meme.topText)), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-2 text-center", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white stroke-black", style: { textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000", fontSize: `${meme.fontSize || 32}px` }, __source: { fileName: "", lineNumber: 402, columnNumber: 21 }, __self: this }, meme.bottomText))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-xs text-[#666]", __source: { fileName: "", lineNumber: 414, columnNumber: 17 }, __self: this }, "Generated from: ", meme.prompt))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] border-2 border-[#848484] rounded p-6", __source: { fileName: "", lineNumber: 422, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl text-[#000080] text-center mb-6", __source: { fileName: "", lineNumber: 423, columnNumber: 11 }, __self: this }, "Cursed TikTok Feed"), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 text-[#ff0000] font-bold", __source: { fileName: "", lineNumber: 426, columnNumber: 11 }, __self: this }, "⚠️ WARNING: These videos have less than 300 views for a reason ⚠️"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#848484] p-4", __source: { fileName: "", lineNumber: 429, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(TikTokFeed, { initialKeywords: "cursed", initialRegion: "us", __source: { fileName: "", lineNumber: 430, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { __source: { fileName: "", lineNumber: 434, columnNumber: 9 }, __self: this }, ` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes loading { 0% { width: 0; } 50% { width: 70%; } 100% { width: 100%; } } .loading-bar { animation: loading 2s ease-in-out infinite; width: 0; } `))); }