function ArticleInputField({ name, placeholder, value, onChange }) { return /*#__PURE__*/ React.createElement("textarea", { name: name, className: "w-full h-[200px] p-2 font-roboto text-[#333] resize-none border border-[#ccc] rounded", placeholder: placeholder, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ArticleInputFieldStory() { const [text, setText] = React.useState(""); function handleChange(event) { setText(event.target.value); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArticleInputField, { name: "inputText", placeholder: "ここに文章を入力してください…", value: text, onChange: handleChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [inputText, setInputText] = React.useState(''); const [summaryText, setSummaryText] = React.useState(''); const [loading, setLoading] = React.useState(false); async function handleSummarize() { if (!inputText) return; setLoading(true); try { const response = await fetch('https://api.example.com/summarize-text', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: inputText }) }); const data = await response.json(); setSummaryText(data.summary); } catch (error) { console.error('Summarization error:', error); setSummaryText('エラーが発生しました。'); } setLoading(false); } function handleInputChange(event) { setInputText(event.target.value); } function handleSpeak() { const utterance = new SpeechSynthesisUtterance(summaryText); window.speechSynthesis.speak(utterance); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] rounded-lg shadow p-4 w-full max-w-[800px]", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "文章要約ツール"), /*#__PURE__*/ React.createElement(ArticleInputField, { name: "inputText", placeholder: "ここに文章を入力してください…", value: inputText, onChange: handleInputChange, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] text-white font-roboto rounded px-6 py-2 hover:bg-[#0056b3] transition duration-300", onClick: handleSummarize, disabled: loading, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "要約する"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white font-roboto rounded px-6 py-2 hover:bg-[#1e7e34] transition duration-300", onClick: handleSpeak, disabled: !summaryText || loading, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "音声出力")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border rounded p-3 font-roboto text-[#666]", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, loading ? '要約中...' : summaryText || '要約結果')))); }