function MainComponent() { const [emojiInput, setEmojiInput] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(null); const [loading, setLoading] = React.useState(false); React.useEffect(()=>{ const script = document.createElement('script'); script.type = 'module'; script.src = 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'; script.onload = ()=>{ document.querySelector('emoji-picker').addEventListener('emoji-click', (event)=>{ setEmojiInput((prev)=>prev + event.detail.unicode); }); }; document.body.appendChild(script); }, []); const handleDeleteLast = ()=>{ setEmojiInput((prev)=>prev.slice(0, -2)); }; const handleGenerate = async ()=>{ setLoading(true); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(emojiInput)}`, { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); } catch (error) { console.error('Error generating image:', error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] text-white flex flex-col font-sans", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 flex-col items-start p-4 space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Emoji to image"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full space-x-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "emojiinput", value: emojiInput, readOnly: true, className: "flex-grow p-2 text-black", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDeleteLast, className: "p-2 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "←"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "p-2 bg-blue-600 w-24 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Generate")), /*#__PURE__*/ React.createElement("emoji-picker", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 items-center justify-center p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-64 w-64", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }) : imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated emoji image", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 mt-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://koyoy.com", className: "text-blue-400", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "koyoy.com")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` .loader { border-top-color: #3498db; animation: spinner 1.5s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } `)); }