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 [prompt, setPrompt] = useState(""); const [width, setWidth] = useState(1024); const [height, setHeight] = useState(1024); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [generatedImage, setGeneratedImage] = useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); if (!prompt.trim()) return; setLoading(true); setError(""); setGeneratedImage(null); try { const response = await fetch("/api/generate-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: prompt.trim(), width: parseInt(width), height: parseInt(height) }) }); if (!response.ok) { throw new Error("Failed to generate image"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setGeneratedImage(data); } catch (err) { console.error(err); setError(err.message || "Failed to generate image. Please try again."); } finally{ setLoading(false); } }; const downloadImage = async ()=>{ if (!generatedImage?.imageUrl) return; try { const response = await fetch(generatedImage.imageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `generated-image-${Date.now()}.jpg`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (err) { setError("Failed to download image"); } }; const sizeOptions = [ { label: "Square (1024×1024)", width: 1024, height: 1024 }, { label: "Portrait (768×1024)", width: 768, height: 1024 }, { label: "Landscape (1024×768)", width: 1024, height: 768 }, { label: "Wide (1344×768)", width: 1344, height: 768 } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FEFEFE] font-serif", __source: { fileName: "", lineNumber: 74, 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: 75, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-6 py-16 relative", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-light text-gray-800 mb-4 tracking-tight", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "w-16 h-0.5 bg-gray-300 mx-auto mb-6", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Create custom images using AI from text descriptions")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border border-gray-200 p-6 shadow-sm", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Describe the image you want to create"), /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>{ setPrompt(e.target.value); setError(""); }, placeholder: "A serene mountain landscape at sunset with a lake reflecting the sky...", className: "w-full px-4 py-3 border border-gray-200 text-gray-900 bg-white focus:outline-none focus:border-gray-400 transition-colors resize-none h-24", disabled: loading, required: true, __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "Image size"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, sizeOptions.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, type: "button", onClick: ()=>{ setWidth(option.width); setHeight(option.height); }, className: `p-3 text-left border transition-colors ${width === option.width && height === option.height ? "border-gray-400 bg-gray-50" : "border-gray-200 hover:border-gray-300"}`, disabled: loading, __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-800", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, option.label))))), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !prompt.trim(), className: "w-full 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: 142, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }), "Generating image...") : "Generate Image")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 text-red-700 text-sm", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, error)), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "bg-white border border-gray-200 p-6 shadow-sm", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-800 mb-4", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, "Generated Image"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage.imageUrl, alt: generatedImage.prompt, className: "w-full max-w-lg mx-auto border border-gray-200", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, "Prompt Used"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 bg-gray-50 p-2 border", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, generatedImage.prompt)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: downloadImage, className: "flex-1 px-4 py-2 bg-gray-800 text-white font-medium hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }), "Download Image"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setGeneratedImage(null); setPrompt(""); }, className: "px-4 py-2 border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Generate New"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 213, 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: 214, columnNumber: 11 }, __self: this }, "← Back to Tools")))); }