function PhotonicsNotes({ title, sections, selectedSection, setSelectedSection, newItem, setNewItem, handleAddItem }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center text-blue-600", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, sections.map((section, index)=>/*#__PURE__*/ React.createElement("section", { key: index, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 text-blue-500", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, section.title), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside pl-4", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, section.items.map((item, itemIndex)=>/*#__PURE__*/ React.createElement("li", { key: itemIndex, __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }, item)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddItem, className: "mt-6", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "flex-grow p-2 border rounded", value: selectedSection, name: "section", onChange: (e)=>setSelectedSection(Number(e.target.value)), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, sections.map((section, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: index, __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, section.title))), /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-grow p-2 border rounded", placeholder: "新しい項目を追加", name: "newItem", value: newItem, onChange: (e)=>setNewItem(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "追加")))); } function PhotonicsNotesStory() { const [sections, setSections] = React.useState([ { title: 'セクション1', items: [ 'アイテム1' ] }, { title: 'セクション2', items: [ 'アイテム2' ] } ]); const [selectedSection, setSelectedSection] = React.useState(0); const [newItem, setNewItem] = React.useState(''); const handleAddItem = (e)=>{ e.preventDefault(); const updatedSections = [ ...sections ]; updatedSections[selectedSection].items.push(newItem); setSections(updatedSections); setNewItem(''); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PhotonicsNotes, { title: "光エレクトロニクスのノート", sections: sections, selectedSection: selectedSection, setSelectedSection: setSelectedSection, newItem: newItem, setNewItem: setNewItem, handleAddItem: handleAddItem, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function NoteSection({ title }) { return /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 text-blue-500", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function NoteSectionStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NoteSection, { title: "セクションタイトル: ノート項目", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [sections, setSections] = React.useState([ { title: "1. 光の基本原理", items: [ "光の波動性と粒子性", "電磁波のスペクトル", "光の反射、屈折、干渉" ] }, { title: "2. 半導体物理の基礎", items: [ "バンド理論", "キャリア濃度と移動度", "pn接合" ] }, { title: "3. 光デバイス", items: [ "発光ダイオード (LED)", "レーザーダイオード", "フォトダイオード", "太陽電池" ] }, { title: "4. 光ファイバー通信", items: [ "光ファイバーの構造と原理", "光変調技術", "光増幅器" ] } ]); const [newItem, setNewItem] = React.useState(""); const [selectedSection, setSelectedSection] = React.useState(0); const handleAddItem = (e)=>{ e.preventDefault(); if (newItem.trim() !== "") { const updatedSections = [ ...sections ]; updatedSections[selectedSection].items.push(newItem.trim()); setSections(updatedSections); setNewItem(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-sans", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center text-blue-600", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "光エレクトロニクスのノート"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, sections.map((section, index)=>/*#__PURE__*/ React.createElement("section", { key: index, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 text-blue-500", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, section.title), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside pl-4", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, section.items.map((item, itemIndex)=>/*#__PURE__*/ React.createElement("li", { key: itemIndex, __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, item)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddItem, className: "mt-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "flex-grow p-2 border rounded", value: selectedSection, onChange: (e)=>setSelectedSection(Number(e.target.value)), __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, sections.map((section, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: index, __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, section.title))), /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-grow p-2 border rounded", placeholder: "新しい項目を追加", value: newItem, onChange: (e)=>setNewItem(e.target.value), __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "追加"))))); }