\n {/* Header */}\n

\n 🚀 Jeropay Caption Generator\n

\n Create engaging social media captions\n

\n\n {/* Input Section */}\n

\n \n What's your topic?\n \n setTopic(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"e.g., summer productivity tips, remote work hacks, creative inspiration...\"\n className=\"w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-transparent\"\n disabled={loading}\n />\n

\n \n {loading ? (\n <>\n

\n Generating...\n \n ) : (\n <>\n ✨ Generate Captions\n \n )}\n \n

\n \n {error && (\n

\n {error}\n

\n )}\n

\n\n {/* Results Section */}\n {captions.length > 0 && (\n

\n 🎯 Your Creative Captions\n

\n \n

\n {captions.map((caption, index) => (\n \n

\n \n Caption {index + 1}\n \n

\n {caption}\n

\n \n copyToClipboard(caption, index)}\n className=\"copy-btn bg-white/10 hover:bg-white/20 text-white p-2 rounded-lg border border-white/20 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-200\"\n title=\"Copy to clipboard\"\n >\n {copiedIndex === index ? (\n <>\n ✓\n Copied!\n \n ) : (\n <>\n 📋\n Copy\n \n )}\n \n

\n ))}\n

\n\n {/* Generate More Button */}\n

\n {\n setCaptions([]);\n setTopic(\"\");\n }}\n className=\"px-6 py-3 bg-white/10 hover:bg-white/20 text-white font-medium rounded-lg border border-white/20 transition-all duration-200\"\n >\n 🔄 Generate New Captions\n \n

\n )}\n\n {/* Footer */}\n

\n \n );\n}\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();","deleted","label",[167,149],"frontend","permalink","https://www.val.town/x/Ermd33s/ContentGen/code/frontend/index.tsx","extension","actionData","errors"]