function MainComponent() { const [activeTab, setActiveTab] = useState("template"); const [isTimerRunning, setIsTimerRunning] = useState(false); const [seconds, setSeconds] = useState(0); const [targetTime, setTargetTime] = useState(300); // 5分をデフォルトに useEffect(()=>{ let interval; if (isTimerRunning) { interval = setInterval(()=>{ setSeconds((prevSeconds)=>{ if (prevSeconds >= targetTime) { setIsTimerRunning(false); return targetTime; } return prevSeconds + 1; }); }, 1000); } return ()=>clearInterval(interval); }, [ isTimerRunning, targetTime ]); const startTimer = ()=>{ setSeconds(0); setIsTimerRunning(true); }; const stopTimer = ()=>{ setIsTimerRunning(false); }; const resetTimer = ()=>{ setSeconds(0); setIsTimerRunning(false); }; const formatTime = (timeInSeconds)=>{ const minutes = Math.floor(timeInSeconds / 60); const remainingSeconds = timeInSeconds % 60; return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const tabs = { template: { icon: "fas fa-file-powerpoint", title: "プレゼンテンプレート", content: [ { title: "研究背景の説明", desc: "研究テーマを選んだ理由と社会的意義" }, { title: "研究目的", desc: "明確な目標と期待される成果" }, { title: "研究方法", desc: "具体的な調査・実験方法の詳細" }, { title: "結果と考察", desc: "データの分析と考察のポイント" }, { title: "結論と展望", desc: "研究成果のまとめと今後の課題" } ] }, tips: { icon: "fas fa-lightbulb", title: "発表のコツと注意点", content: [ { title: "声の大きさと速さ", desc: "聴衆全員に届く声量と適切な話速で" }, { title: "アイコンタクト", desc: "聴衆との視線の合わせ方" }, { title: "スライドの見やすさ", desc: "文字の大きさとコントラスト" }, { title: "時間配分", desc: "各セクションの適切な時間配分" }, { title: "ジェスチャー", desc: "効果的な手振りの使い方" } ] }, rehearsal: { icon: "fas fa-clipboard-check", title: "リハーサルチェックリスト", content: [ { title: "時間計測", desc: "発表時間が制限内に収まっているか" }, { title: "機材確認", desc: "プロジェクターなどの動作確認" }, { title: "原稿確認", desc: "キーワードの発音や専門用語の確認" }, { title: "立ち位置", desc: "スクリーンと聴衆への意識" }, { title: "質疑想定", desc: "想定される質問への回答準備" } ] }, qa: { icon: "fas fa-comments", title: "質疑応答準備ガイド", content: [ { title: "予想質問リスト", desc: "考えられる質問とその回答" }, { title: "回答の構造化", desc: "簡潔で分かりやすい回答の組み立て" }, { title: "補足資料", desc: "詳細データの準備" }, { title: "質問の理解", desc: "質問の意図を正確に把握する方法" }, { title: "謙虚な態度", desc: "建設的な議論の進め方" } ] } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-50 to-white py-12 px-4", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-gray-800 mb-12 font-noto", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "発表準備ガイド"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, Object.entries(tabs).map(([key, { icon, title }])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setActiveTab(key), className: `flex items-center px-6 py-3 rounded-lg font-noto transition-all ${activeTab === key ? "bg-blue-600 text-white shadow-lg" : "bg-white text-gray-600 hover:bg-blue-50"}`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} mr-2`, __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), title))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-4 mb-8", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4 font-noto", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "練習タイマー"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mb-4 font-noto", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, formatTime(seconds), " / ", formatTime(targetTime)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startTimer, disabled: isTimerRunning, className: "bg-blue-600 text-white px-6 py-2 rounded-lg disabled:bg-gray-400 font-noto", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "開始"), /*#__PURE__*/ React.createElement("button", { onClick: stopTimer, disabled: !isTimerRunning, className: "bg-red-600 text-white px-6 py-2 rounded-lg disabled:bg-gray-400 font-noto", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "停止"), /*#__PURE__*/ React.createElement("button", { onClick: resetTimer, className: "bg-gray-600 text-white px-6 py-2 rounded-lg font-noto", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "リセット")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-4", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-noto", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, "目標時間:"), /*#__PURE__*/ React.createElement("select", { value: targetTime, onChange: (e)=>setTargetTime(Number(e.target.value)), className: "border rounded-lg px-4 py-2 font-noto", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: 180, __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, "3分"), /*#__PURE__*/ React.createElement("option", { value: 300, __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "5分"), /*#__PURE__*/ React.createElement("option", { value: 600, __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "10分"), /*#__PURE__*/ React.createElement("option", { value: 900, __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, "15分"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${tabs[activeTab].icon} text-3xl text-blue-500 mr-4`, __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 font-noto", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, tabs[activeTab].title)), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, tabs[activeTab].content.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-6 bg-gray-50 rounded-lg hover:bg-blue-50 transition-colors", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-700 mb-2 font-noto", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-noto", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, item.desc))))))); }