function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [url, setUrl] = React.useState(''); const [metaDescription, setMetaDescription] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const generateMetaDescription = async ()=>{ setIsLoading(true); try { const scrapeResponse = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url, getText: true }) }); const scrapedContent = await scrapeResponse.text(); const aiResponse = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: 'You are an expert in SEO and writing compelling meta descriptions. Your task is to create a meta description that is concise, informative, and encourages users to click through to the website. The description should be between 155-160 characters.' }, { role: 'user', content: `Analyze this website content and generate a meta description: ${scrapedContent.substring(0, 1500)}` } ] }) }); const data = await aiResponse.json(); setMetaDescription(data.choices[0].message.content); } catch (error) { console.error('Error generating meta description:', error); setMetaDescription('An error occurred while generating the meta description. Please try again.'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-poppins min-h-screen bg-[#F8E44F] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-black", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Meta Description Generator"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg border-2 border-black p-6 space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter website URL", value: url, onChange: (e)=>setUrl(e.target.value), className: "w-full px-4 py-2 border-2 border-black rounded-[6px] focus:outline-none focus:border-[#C1BFF9]", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: isLoading ? 'Generating...' : 'Generate Meta Description', icon: "fa-magic", color: "purple", onClick: generateMetaDescription, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), metaDescription && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 text-black", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Generated Meta Description:"), /*#__PURE__*/ React.createElement("p", { className: "bg-[#7EE7D6] p-4 rounded-[6px] border-2 border-black text-black", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, metaDescription)))); }