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 [theme, setTheme] = React.useState(""); const [outline, setOutline] = React.useState(null); const [blogContent, setBlogContent] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [grandfatherMessage, setGrandfatherMessage] = React.useState(""); const generateOutline = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${theme}についてのブログ記事のアウトラインを作成してください。3章構成で、各章には小項目も含めてください。` } ] }) }); const data = await response.json(); setOutline(data.choices[0].message.content); } catch (error) { console.error("Error generating outline:", error); } setIsLoading(false); }; const generateBlogContent = async (chapter)=>{ setIsLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${theme}についてのブログ記事の${chapter}章を1000文字程度で書いてください。おじいちゃん口調で書いてください。` } ] }) }); const data = await response.json(); setBlogContent((prevContent)=>[ ...prevContent, data.choices[0].message.content ]); } catch (error) { console.error("Error generating blog content:", error); } setIsLoading(false); }; const generateGrandfatherMessage = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${theme}についてのブログ記事を書き終えた感想を、おじいちゃん口調で一言お願いします。` } ] }) }); const data = await response.json(); setGrandfatherMessage(data.choices[0].message.content); } catch (error) { console.error("Error generating grandfather message:", error); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-poppins bg-[#F8E44F] min-h-screen p-8", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, "おじいちゃんブログメイカー"), /*#__PURE__*/ React.createElement("img", { src: "https://ymmd-ai.co.jp/wp-content/uploads/2024/08/GVLK72QbIAA4Vpl.jpeg", alt: "おじいちゃんブログメイカーの画像", className: "mx-auto mb-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: theme, onChange: (e)=>setTheme(e.target.value), placeholder: "ブログのテーマを入力してください", className: "w-full p-2 mb-4 border-2 border-black rounded-[6px]", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "アウトライン生成", icon: "fa-pencil-alt", color: "purple", onClick: generateOutline, __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this })), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-black", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this })), outline && /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "アウトライン"), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, outline), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, [ 1, 2, 3 ].map((chapter)=>/*#__PURE__*/ React.createElement(StylishButton, { key: chapter, text: `第${chapter}章を生成`, icon: "fa-file-alt", color: "teal", onClick: ()=>generateBlogContent(chapter), __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this })))), blogContent.map((content, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "第", index + 1, "章"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, content))), blogContent.length === 3 && !grandfatherMessage && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "おじいちゃんからの一言", icon: "fa-comment", color: "yellow", onClick: generateGrandfatherMessage, __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this })), grandfatherMessage && /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, "おじいちゃんからの一言"), /*#__PURE__*/ React.createElement("p", { className: "italic", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, grandfatherMessage))); }