function MainComponent() { const [isRecording, setIsRecording] = React.useState(false); const [transcript, setTranscript] = React.useState(""); const [summary, setSummary] = React.useState(""); const [procedure, setProcedure] = React.useState(""); const [tags, setTags] = React.useState([]); const [history, setHistory] = React.useState([]); const handleRecordButton = ()=>{ setIsRecording(!isRecording); if (!isRecording) { setTranscript("音声の録音が開始されました..."); } else { setTranscript("録音が停止しました。ここに文字起こしされた内容が表示されます。"); } }; const handleSummarize = async ()=>{ setSummary("これは全体要約欄のダミー内容です。"); setProcedure("ステップ1: 録音を開始する\nステップ2: 録音を停止する"); setTags([ "#タグ1", "#タグ2", "#タグ3" ]); }; const handleOk = ()=>{ setTranscript(""); setSummary(""); setProcedure(""); setTags([]); setHistory([ ...history, transcript ]); setIsRecording(false); }; const handleClear = ()=>{ setTranscript(""); setSummary(""); setProcedure(""); setTags([]); setIsRecording(false); }; const handleClearHistory = ()=>{ setHistory([]); }; const summaryComponents = [ { title: "全体要約欄", content: summary, copyButton: true }, { title: "手順要約欄", content: procedure, copyButton: true }, { title: "話題タグ欄", content: tags.join(' '), copyButton: true } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row items-start lg:items-center justify-center min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center lg:block w-full lg:w-auto p-4 bg-[#242424] rounded-lg mb-8 lg:mb-0 lg:mr-8", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, history.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-gray-400 hover:text-gray-200 cursor-pointer", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, `履歴 ${index + 1}`)), /*#__PURE__*/ React.createElement("button", { className: "w-8 h-8 mt-4 bg-yellow-500 rounded-full", onClick: handleClearHistory, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "🗑️")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "recordButton", onClick: handleRecordButton, className: `w-full h-16 my-4 font-roboto text-[32px] rounded-full ${isRecording ? 'bg-[#FFD580] animate-pulse' : 'bg-red-600'} font-semibold`, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, isRecording ? "録音停止" : "録音する"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg my-8 relative bg-white text-black", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "transcriptArea", readOnly: true, className: "w-full h-40 px-3 py-2 bg-white text-black border border-gray-700 rounded-md text-[16px]", value: transcript, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { style: { position: 'absolute', top: '0.5rem', right: '0.5rem' }, onClick: ()=>navigator.clipboard.writeText(transcript), __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "📋")), /*#__PURE__*/ React.createElement("button", { name: "summarizeButton", onClick: handleSummarize, className: "w-full h-16 my-4 text-[32px] bg-green-600 rounded-md font-roboto font-semibold", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "要約"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-4 w-full max-w-4xl mb-8 bg-white text-black", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, summaryComponents.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "h-40 border border-gray-700 rounded-md p-4 relative", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-[16px]", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, item.content), item.copyButton && /*#__PURE__*/ React.createElement("button", { style: { position: 'absolute', top: '0.5rem', right: '0.5rem' }, onClick: ()=>navigator.clipboard.writeText(item.content), __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, "📋")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full max-w-lg", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "clearButton", onClick: handleClear, className: "w-full h-16 mr-4 mb-4 bg-yellow-500 rounded-tr-[50px] rounded-br-[50px]", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "🗑️"), /*#__PURE__*/ React.createElement("button", { name: "okButton", onClick: handleOk, className: "w-full h-16 ml-4 mb-4 text-[32px] bg-blue-600 rounded-tr-[50px] rounded-br-[50px] font-roboto", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "OK")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }