function Button({ text, keyboardCommand, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center justify-center px-4 py-2 bg-[#1E1E1E] text-white border border-[#2A2A2A] rounded-lg hover:bg-[#2A2A2A] transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, text), keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-1.5 py-0.5 text-xs bg-[#2A2A2A] text-white rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Click me", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Save", keyboardCommand: "⌘S", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Open", keyboardCommand: "⌘O", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [postData, setPostData] = React.useState({ keywords: "", content: "" }); const [preview, setPreview] = React.useState(false); const [streamingContent, setStreamingContent] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [copySuccess, setCopySuccess] = React.useState(false); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingContent, onFinish: (message)=>{ setPostData((prev)=>({ ...prev, content: message })); setIsLoading(false); } }); const handleChange = (e)=>{ const { name, value } = e.target; setPostData((prev)=>({ ...prev, keywords: value })); }; const generateContent = async ()=>{ if (!postData.keywords) return; setIsLoading(true); setStreamingContent(""); const prompt = `Generate a travel blog post about ${postData.keywords}. The blog post should be informative and engaging, with a clear structure including an introduction, main points, and a conclusion. Aim for approximately 300-400 words.`; try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error generating content:", error); setIsLoading(false); } }; const exampleTopics = [ "Hidden Gems in Europe", "Backpacking Southeast Asia", "Luxury Travel Tips" ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#151515] min-h-screen flex flex-col items-center justify-center font-open-sans relative px-4 sm:px-8", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-3xl relative z-10", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4 sm:mb-6 pt-8", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs sm:text-sm text-[#A4A4A4] inline-block bg-[#1E1E1E] px-3 py-1 rounded-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "AI powered tool")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-5xl text-white mb-4 sm:mb-6 text-center flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl sm:text-6xl", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "🌎"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Wanderlust Writer")), /*#__PURE__*/ React.createElement("p", { className: "text-center text-base sm:text-lg text-[#A4A4A4] mb-8 sm:mb-12", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Turn your adventures into captivating content"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center w-full", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "keywords", value: postData.keywords, onChange: handleChange, placeholder: "Enter topic or keyword", className: "w-full h-[46px] p-3 text-lg sm:text-xl text-white bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg focus:outline-none focus:border-white", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateContent, disabled: isLoading, className: "w-full sm:w-auto h-[46px] px-4 py-2 text-lg sm:text-xl text-white bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg hover:bg-[#2A2A2A] transition-colors", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, isLoading ? "Generating..." : "Generate"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-2 mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, exampleTopics.map((topic)=>/*#__PURE__*/ React.createElement("button", { key: topic, onClick: ()=>setPostData((prev)=>({ ...prev, keywords: topic })), className: "px-3 py-1 border border-[#2A2A2A] rounded-lg text-sm sm:text-base text-white hover:bg-[#1E1E1E] transition-colors", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, topic))), /*#__PURE__*/ React.createElement("div", { className: "p-2 sm:p-4 text-center text-xs sm:text-sm text-[#777777] flex items-center justify-center", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "powered by", /*#__PURE__*/ React.createElement("a", { href: "https://create.xyz", className: "font-bold text-[#555555] ml-1 flex items-center", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c94b8fcc-6f53-4cdf-9099-51c5b3bb2f68/-/format/auto/", alt: "Create Logo", className: "h-3 sm:h-4 mr-1", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }), "create.xyz"))), (postData.content || isLoading) && /*#__PURE__*/ React.createElement("div", { className: "mt-6 sm:mt-8 border border-[#2A2A2A] rounded-lg p-4 sm:p-6 bg-[#1E1E1E]", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl sm:text-2xl text-white mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Blog Post: ", postData.keywords), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-[#A4A4A4] mb-4 sm:mb-6 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, streamingContent || postData.content), !isLoading && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText(postData.content); setCopySuccess(true); setTimeout(()=>setCopySuccess(false), 2000); }, className: "px-3 py-1 border border-[#2A2A2A] rounded-lg text-sm sm:text-base text-white hover:bg-[#1E1E1E] transition-colors", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, copySuccess ? "✔️" : "Copy Content")))); }

🌎Wanderlust Writer