function MainComponent() { const [formData, setFormData] = React.useState({ storeName: '', productName: '', targetCustomer: '', postType: '', postIdeas: '', generatedContent: { caption: '' }, isLoading: false }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = async (e)=>{ e.preventDefault(); setFormData({ ...formData, isLoading: true }); const requestContent = `店舗名: ${formData.storeName}, 商品名: ${formData.productName}, ターゲット顧客層: ${formData.targetCustomer}, 投稿の種類: ${formData.postType}, 投稿ネタやキーワード: ${formData.postIdeas}`; try { const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: requestContent } ] }) }); const data = await response.json(); const content = data.choices[0].message.content; setFormData({ ...formData, isLoading: false, generatedContent: { caption: content } }); } catch (error) { setFormData({ ...formData, isLoading: false }); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#eef2f7] min-h-screen p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#333] font-bold text-3xl font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Instagram投稿コンテンツジェネレータ"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] font-roboto mt-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "入力フォームとその説明がわかりやすく配置されているデザイン")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg bg-white p-6 rounded-lg shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "storeName", placeholder: "店舗名", value: formData.storeName, onChange: handleChange, className: "block w-full p-2 my-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", placeholder: "商品名", value: formData.productName, onChange: handleChange, className: "block w-full p-2 my-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "targetCustomer", placeholder: "ターゲット顧客層", value: formData.targetCustomer, onChange: handleChange, className: "block w-full p-2 my-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "postType", value: formData.postType, onChange: handleChange, className: "block w-full p-2 my-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "投稿の種類を選択"), /*#__PURE__*/ React.createElement("option", { value: "productIntroduction", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "商品紹介"), /*#__PURE__*/ React.createElement("option", { value: "customerEducation", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "顧客教育・価値提供")), /*#__PURE__*/ React.createElement("textarea", { name: "postIdeas", placeholder: "投稿ネタやキーワード", value: formData.postIdeas, onChange: handleChange, className: "block w-full p-2 my-2 bg-gray-100 rounded h-[100px]", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: formData.isLoading, className: "bg-[#415dff] text-white rounded-full px-4 py-2 hover:bg-[#1f3fb6] font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, formData.isLoading ? '生成中...' : '生成')), formData.generatedContent.caption && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white p-6 mt-6 rounded-lg shadow", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#333] font-bold font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "生成された投稿内容"), /*#__PURE__*/ React.createElement("div", { className: "border-1 border-[#ddd] p-2 my-2 rounded bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "キャプション:"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-[100px] p-2 bg-white", value: formData.generatedContent.caption, readOnly: true, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }))))); }