function UrlShortener() { const [url, setUrl] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [result, setResult] = useState(null); const [copied, setCopied] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(""); try { const response = await fetch("/api/api", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } setResult(data); } catch (err) { setError(err.message || "Failed to shorten URL"); } finally{ setLoading(false); } }; const copyToClipboard = async ()=>{ try { await navigator.clipboard.writeText(result.shortUrl); setCopied(true); setTimeout(()=>setCopied(false), 2000); } catch (err) { setError("Failed to copy URL"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "URL Shortener"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", name: "url", value: url, onChange: (e)=>{ setUrl(e.target.value); setError(""); }, placeholder: "Enter your long URL", className: "flex-1 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-800 focus:outline-none focus:border-gray-900 dark:focus:border-gray-500 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !url, className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white rounded-lg hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }) : "Shorten URL")), error && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-red-500 text-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, error)), result && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 transform transition-all duration-300 ease-in-out", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Original URL"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 dark:text-white break-all", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, result.originalUrl)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Shortened URL"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 dark:text-white break-all flex-1", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, result.shortUrl), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "p-2 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, copied ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 115, columnNumber: 21 }, __self: this }))))))); } function UrlShortenerStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UrlShortener, { __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this })); } function MainComponent() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const handleSearch = async (e)=>{ e.preventDefault(); if (!query.trim()) return; setLoading(true); setError(""); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(query.trim())}`); if (!response.ok) { throw new Error("Failed to fetch search results"); } const data = await response.json(); setResults(data.items || []); } catch (err) { console.error(err); setError("Failed to fetch search results. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FEFEFE] font-serif", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-20", style: { backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E5E7EB' fill-opacity='0.3'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='53' cy='53' r='1'/%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` }, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-6 py-16 relative", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-light text-gray-800 mb-4 tracking-tight", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Google Search"), /*#__PURE__*/ React.createElement("div", { className: "w-16 h-0.5 bg-gray-300 mx-auto mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Search the web efficiently and find what you need")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-8", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border border-gray-200 p-6 shadow-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Enter your search query"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "Search the web...", className: "flex-1 px-4 py-3 border border-gray-200 text-gray-900 bg-white focus:outline-none focus:border-gray-400 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !query.trim(), className: "px-6 py-3 bg-gray-800 text-white font-medium hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 78, columnNumber: 28 }, __self: this }) : "Search")))), error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-red-50 border border-red-200 text-red-700 text-sm", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white border border-gray-200 p-6 shadow-sm", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", className: "block hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mb-1 uppercase tracking-wide", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, result.displayLink), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-gray-800 mb-2 hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm leading-relaxed", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, result.snippet))))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Searching...")), !loading && results.length === 0 && query && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-2xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, 'No results found for "', query, '"')), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/landing-page", className: "text-sm text-gray-500 hover:text-gray-700 transition-colors", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "← Back to Tools")))); }