function RobotoMemoList({ title }) { return /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#333] mb-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function RobotoMemoListStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RobotoMemoList, { title: "メモ一覧", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [notes, setNotes] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const [tagFilter, setTagFilter] = React.useState(''); const [memo, setMemo] = React.useState(''); const [tags, setTags] = React.useState(''); const handleAddNote = ()=>{ if (memo.trim() && tags.trim()) { const newNote = { memo, tags: tags.split(',').map((tag)=>tag.trim()) }; setNotes([ ...notes, newNote ]); setMemo(''); setTags(''); } }; const handleChange = (e)=>{ switch(e.target.name){ case 'search': setSearchTerm(e.target.value); break; case 'tagFilter': setTagFilter(e.target.value); break; case 'memo': setMemo(e.target.value); break; case 'tags': setTags(e.target.value); break; default: break; } }; const allTags = Array.from(new Set(notes.flatMap((note)=>note.tags))); const filteredNotes = notes.filter((note)=>note.memo.includes(searchTerm) && (tagFilter ? note.tags.includes(tagFilter) : true)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full w-full bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[600px] lg:w-[800px]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto text-[#333] text-2xl mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "メモ帳アプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, placeholder: "キーワード検索", onChange: handleChange, className: "p-2 w-full md:w-auto border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "tagFilter", value: tagFilter, placeholder: "タグで絞り込み", onChange: handleChange, className: "p-2 w-full md:w-auto border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "memo", value: memo, onChange: handleChange, className: "w-full p-2 border border-[#ccc] rounded", rows: "4", placeholder: "メモを入力", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "tags", value: tags, onChange: handleChange, placeholder: "タグ (カンマ区切り)", className: "mt-2 p-2 w-full border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-[#007BFF] text-white rounded w-full", onClick: handleAddNote, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "メモを追加")), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(RobotoMemoList, { title: "タグ一覧", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, allTags.map((tag, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setTagFilter(tag), className: "bg-[#007BFF] text-white py-1 px-2 rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, tag)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(RobotoMemoList, { title: "メモ一覧", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, filteredNotes.map((note, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-3 bg-white border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, note.memo), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#555]", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "タグ: ", note.tags.join(", ")))))))); }