function SpotifyPlayer({ trackId }) { const [isLoading, setIsLoading] = useState(true); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[450px] mx-auto p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full bg-white rounded-xl shadow-lg overflow-hidden", style: { paddingTop: "120%" }, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-slate-100 animate-pulse rounded-xl", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("iframe", { className: "absolute top-0 left-0 w-full h-full border-0 rounded-xl", src: `https://open.spotify.com/embed/track/${trackId}?utm_source=generator`, allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", onLoad: ()=>setIsLoading(false), __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }))); } function SpotifyPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-slate-50 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpotifyPlayer, { trackId: "4cOdK2wGLETKBW3PvgPWqT", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-8", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SpotifyPlayer, { trackId: "0V3wPSX9ygBnCm8psDIegu", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function SpotifySearch() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [selectedTrack, setSelectedTrack] = useState(null); const [isPlayerLoading, setIsPlayerLoading] = useState(true); const handleSearch = useCallback(async ()=>{ if (!query.trim()) return; setLoading(true); setError(null); setSelectedTrack(null); try { const authResponse = await fetch("/api/spotify/auth", { method: "POST" }); if (!authResponse.ok) { throw new Error("Failed to authenticate with Spotify"); } const { token, error: authError } = await authResponse.json(); if (authError) { throw new Error(authError); } const response = await fetch(`https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track`, { headers: { Authorization: `Bearer ${token}` } }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setResults(data.tracks?.items || []); } catch (err) { console.error(err); setError(err.message || "Unable to search tracks. Please try again."); } finally{ setLoading(false); } }, [ query ]); const handleBackToSearch = useCallback(()=>{ setSelectedTrack(null); setIsPlayerLoading(true); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: query, onChange: (e)=>setQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSearch(), placeholder: "Search for a track...", name: "search", className: "flex-1 px-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-[#1DB954] focus:border-transparent", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, disabled: loading, className: "bg-[#1DB954] text-white px-6 py-2 rounded-full hover:bg-[#1ed760] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 text-red-500 rounded-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, error)), loading && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 text-center", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-4 border-[#1DB954] border-t-transparent mx-auto", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Searching...")), !loading && !selectedTrack && results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, results.map((track)=>/*#__PURE__*/ React.createElement("div", { key: track.id, className: "bg-white rounded-xl shadow-lg p-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: track.album?.images?.[1]?.url || "/default-album.png", alt: `Album artwork for ${track.album?.name}`, className: "w-20 h-20 object-cover rounded-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium truncate", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, track.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm truncate", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, track.artists?.[0]?.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedTrack(track.id), className: "mt-2 bg-[#1DB954] text-white px-4 py-1 rounded-full text-sm hover:bg-[#1ed760] transition-colors", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, "Play Track")))))), selectedTrack && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBackToSearch, className: "text-[#1DB954] hover:text-[#1ed760] transition-colors flex items-center gap-2", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }), "Back to search results"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[450px] mx-auto", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full bg-white rounded-xl shadow-lg overflow-hidden", style: { paddingTop: "120%" }, __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, isPlayerLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-slate-100 animate-pulse rounded-xl", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("iframe", { className: "absolute top-0 left-0 w-full h-full border-0 rounded-xl", src: `https://open.spotify.com/embed/track/${selectedTrack}?utm_source=generator`, allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", onLoad: ()=>setIsPlayerLoading(false), __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }))))); } function SpotifySearchStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-slate-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 155, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpotifySearch, { __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this })); } function LatestNewsResults() { const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [language, setLanguage] = useState("en"); const languages = [ { code: "ar", name: "Arabic" }, { code: "zh", name: "Chinese" }, { code: "nl", name: "Dutch" }, { code: "en", name: "English" }, { code: "fi", name: "Finnish" }, { code: "fr", name: "French" }, { code: "de", name: "German" }, { code: "hi", name: "Hindi" }, { code: "it", name: "Italian" }, { code: "ja", name: "Japanese" }, { code: "ko", name: "Korean" }, { code: "msa", name: "Malay" }, { code: "pt", name: "Portuguese" }, { code: "ru", name: "Russian" }, { code: "es", name: "Spanish" } ]; const fetchNews = async (selectedLanguage)=>{ setLoading(true); setError(null); try { const response = await fetch("/api/fetch-latest-news", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ language: selectedLanguage }) }); if (!response.ok) { throw new Error(`Failed to fetch news: [${response.status}] ${response.statusText}`); } const data = await response.json(); if (data.error) { throw new Error(data.message); } setArticles(data.articles); } catch (err) { setError("Unable to load news articles. Please try again later."); console.error(err); } finally{ setLoading(false); } }; useEffect(()=>{ fetchNews(language); }, [ language ]); const formatDate = (dateString)=>{ return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-8", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "block w-40 p-2 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md focus:outline-none", name: "language", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang.code, value: lang.code, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, lang.name)))), error && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 bg-red-50 dark:bg-red-900/10 rounded-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 dark:text-red-400 font-inter text-lg mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Unable to load news articles"), /*#__PURE__*/ React.createElement("p", { className: "text-red-500/80 dark:text-red-400/80 font-inter text-sm mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Please try again later"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchNews(language), className: "px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white font-inter rounded-md transition-colors focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Try Again")), loading && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4, 5, 6 ].map((index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 dark:bg-gray-700 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this })))), !loading && !error && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, articles.map((article)=>/*#__PURE__*/ React.createElement("article", { key: article.id, className: "flex flex-col bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer", className: "group flex flex-col flex-1 hover:opacity-95 transition-opacity", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pb-[56.25%] overflow-hidden", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: article.image === "None" || !article.image ? "https://images.pexels.com/photos/518543/pexels-photo-518543.jpeg" : article.image, alt: article.title, className: "absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", __source: { fileName: "", lineNumber: 128, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col flex-1", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-white mb-2 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400", __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-inter text-gray-700 dark:text-gray-300 mb-4 line-clamp-3", __source: { fileName: "", lineNumber: 142, columnNumber: 21 }, __self: this }, article.description), /*#__PURE__*/ React.createElement("div", { className: "mt-auto", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-xs font-inter text-gray-500 dark:text-gray-400 mb-2", __source: { fileName: "", lineNumber: 146, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 147, columnNumber: 25 }, __self: this }, article.author || "Unknown Author"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 148, columnNumber: 25 }, __self: this }, formatDate(article.published))), /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-500", __source: { fileName: "", lineNumber: 150, columnNumber: 23 }, __self: this }, "Read more ", /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 151, columnNumber: 35 }, __self: this }, "→")))))))), !loading && !error && articles.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "No articles found")))); } function LatestNewsResultsStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LatestNewsResults, { __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this })); } const COMMON_CURRENCIES = [ { code: "USD", name: "US Dollar" }, { code: "EUR", name: "Euro" }, { code: "GBP", name: "British Pound" }, { code: "JPY", name: "Japanese Yen" }, { code: "AUD", name: "Australian Dollar" }, { code: "CAD", name: "Canadian Dollar" }, { code: "CHF", name: "Swiss Franc" }, { code: "CNY", name: "Chinese Yuan" }, { code: "INR", name: "Indian Rupee" }, { code: "NZD", name: "New Zealand Dollar" }, { code: "SGD", name: "Singapore Dollar" }, { code: "HKD", name: "Hong Kong Dollar" } ].sort((a, b)=>a.code.localeCompare(b.code)); function CurrencyExchange() { const [fromCurrency, setFromCurrency] = useState("USD"); const [toCurrency, setToCurrency] = useState("EUR"); const [amount, setAmount] = useState(1); const [exchangeData, setExchangeData] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const getExchangeRate = async ()=>{ setIsLoading(true); setError(null); const response = await fetch("/api/exchange-rate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ from: fromCurrency, to: toCurrency }) }); const data = await response.json(); if (data.error) { setError(data.error); } else { setExchangeData(data); } setIsLoading(false); }; const handleAmountChange = (e)=>{ const value = e.target.value; if (value === "" || value >= 0) { setAmount(value); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto p-6 rounded-lg bg-white dark:bg-gray-800 shadow-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-inter font-semibold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Currency Exchange"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", step: "any", value: amount, onChange: handleAmountChange, className: "w-full p-3 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 text-gray-900 dark:text-white font-inter", placeholder: "Enter amount", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("select", { value: fromCurrency, onChange: (e)=>setFromCurrency(e.target.value), className: "w-full p-3 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 text-gray-900 dark:text-white font-inter appearance-none", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, COMMON_CURRENCIES.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, currency.code, " - ", currency.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("select", { value: toCurrency, onChange: (e)=>setToCurrency(e.target.value), className: "w-full p-3 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 text-gray-900 dark:text-white font-inter appearance-none", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, COMMON_CURRENCIES.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, currency.code, " - ", currency.name)))))), /*#__PURE__*/ React.createElement("button", { onClick: getExchangeRate, disabled: isLoading || !amount, className: "w-full p-3 bg-gray-900 hover:bg-gray-800 text-white font-inter rounded-lg transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, isLoading ? "Getting Rate..." : "Get Exchange Rate"), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded-lg", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 dark:text-red-400 font-inter text-sm", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, error)), isLoading && /*#__PURE__*/ React.createElement("div", { className: "space-y-3 animate-pulse", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded-lg w-3/4", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded-lg w-1/2", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this })), exchangeData && !isLoading && !error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg space-y-2", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-semibold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, amount, " ", exchangeData.fromCurrency, " =", " ", (amount * exchangeData.rate).toFixed(2), " ", exchangeData.toCurrency), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Rate: 1 ", exchangeData.fromCurrency, " =", " ", exchangeData.rate.toFixed(4), " ", exchangeData.toCurrency), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "Last updated:", " ", new Date(exchangeData.lastUpdated).toLocaleString())))); } function CurrencyExchangeStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 165, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CurrencyExchange, { __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this })); } function YouTubePlayer({ videoId, onError }) { const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); useEffect(()=>{ if (!videoId) { setHasError(true); onError?.("No video ID provided"); return; } const timer = setTimeout(()=>{ setIsLoading(false); }, 1500); return ()=>clearTimeout(timer); }, [ videoId, onError ]); if (hasError) { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white dark:bg-gray-900 rounded-lg p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Failed to load video"))); } return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white dark:bg-gray-900 rounded-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 border-4 border-gray-200 dark:border-gray-700 border-t-gray-900 dark:border-t-gray-100 rounded-full animate-spin", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })) : null, /*#__PURE__*/ React.createElement("iframe", { className: "absolute inset-0 w-full h-full", src: `https://www.youtube.com/embed/${videoId}?controls=1`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }))); } function YouTubePlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-gray-100 mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Working Example"), /*#__PURE__*/ React.createElement(YouTubePlayer, { videoId: "dQw4w9WgXcQ", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-gray-100 mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(YouTubePlayer, { videoId: "", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("all"); const [newsData] = useState([ { title: "Latest World News", category: "world", count: 156 }, { title: "Technology Updates", category: "tech", count: 89 }, { title: "Business Headlines", category: "business", count: 67 } ]); const [mediaData] = useState([ { title: "Video Library", type: "video", count: 234 }, { title: "Photo Gallery", type: "photo", count: 567 }, { title: "Audio Archive", type: "audio", count: 123 } ]); const categories = [ "all", "world", "tech", "business", "entertainment", "sports" ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900 text-white p-6", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-inter mb-4 md:mb-0", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Information Services"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 w-full md:w-auto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search content...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "px-4 py-2 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: selectedCategory, onChange: (e)=>setSelectedCategory(e.target.value), className: "px-4 py-2 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category, value: category, __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, category.charAt(0).toUpperCase() + category.slice(1)))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-inter mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "News Categories"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, newsData.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.category, className: "flex justify-between items-center p-3 bg-gray-700 rounded-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, item.count, " articles"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-newspaper text-blue-400", __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-xl", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-inter mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Media Library"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, mediaData.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.type, className: "flex justify-between items-center p-3 bg-gray-700 rounded-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, item.title)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this }, item.count, " items"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.type === "video" ? "video" : item.type === "photo" ? "image" : "microphone"} text-blue-400`, __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-xl", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-inter mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Quick Links"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/news", className: "flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "Latest News"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-gray-400", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/media", className: "flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Media Center"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-gray-400", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/tools", className: "flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "Tools"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-gray-400", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-xl", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-inter mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Latest Updates"), /*#__PURE__*/ React.createElement(LatestNewsResults, { __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }))))); }