function DescriptionGeneratorButton({ generateDescription }) { return /*#__PURE__*/ React.createElement("button", { type: "button", onClick: generateDescription, className: "mt-2 p-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "説明を生成"); } function DescriptionGeneratorButtonStory() { const mockGenerateDescription = ()=>alert("Generating description..."); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DescriptionGeneratorButton, { generateDescription: mockGenerateDescription, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [description, setDescription] = React.useState(''); const handleFormSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); console.log(Object.fromEntries(formData.entries())); }; const generateDescription = async ()=>{ const response = await fetch('https://api.openai.com/v4/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer YOUR_OPENAI_API_KEY' }, body: JSON.stringify({ model: 'text-davinci-003', prompt: 'このふるさと納税の返礼品について魅力的な説明を書いてください。', max_tokens: 100 }) }); const data = await response.json(); setDescription(data.choices[0].text.trim()); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F7F7]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[500px] bg-white p-5 rounded-lg shadow-lg", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text mb-4 text-center text-[#333]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "ふるさと納税返礼品登録"), /*#__PURE__*/ React.createElement("label", { htmlFor: "product-name", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "返礼品名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "product-name", id: "product-name", className: "block w-full p-2 mb-4 border border-[#DDD] rounded-md focus:outline-none focus:ring focus:border-blue-300", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "product-price", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "寄付額"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "product-price", id: "product-price", className: "block w-full p-2 mb-4 border border-[#DDD] rounded-md focus:outline-none focus:ring focus:border-blue-300", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "product-description", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "返礼品説明"), /*#__PURE__*/ React.createElement("textarea", { name: "product-description", id: "product-description", rows: "4", className: "block w-full p-2 border border-[#DDD] rounded-md focus:outline-none focus:ring focus:border-blue-300", value: description, readOnly: true, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(DescriptionGeneratorButton, { generateDescription: generateDescription, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { htmlFor: "product-image", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "返礼品画像"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "product-image", id: "product-image", className: "block w-full text-sm text-[#666] file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 w-full p-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:ring focus:outline-none focus:ring-blue-300", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "登録する"))); }