function TextareaModifier({ value, onChange }) { return /*#__PURE__*/ React.createElement("textarea", { className: "p-2 border border-gray-300 rounded w-full", placeholder: "タスクを追加", name: "description", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TextareaModifierStory() { const [text, setText] = React.useState(""); const handleTextChange = (e)=>{ setText(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextareaModifier, { value: text, onChange: handleTextChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tasks, setTasks] = React.useState([ { id: 1, title: "タスク 1", category: "会議", dueDate: "2023-10-10", priority: "高", status: "未完了" }, { id: 2, title: "タスク 2", category: "レビュー", dueDate: "2023-10-12", priority: "中", status: "完了" } ]); const [newTask, setNewTask] = React.useState({ title: "", category: "", dueDate: "", priority: "高", description: "" }); const handleSubmit = (e)=>{ e.preventDefault(); const updatedTasks = [ ...tasks, { ...newTask, id: tasks.length + 1, status: "未完了" } ]; setTasks(updatedTasks); setNewTask({ title: "", category: "", dueDate: "", priority: "高", description: "" }); }; const handleInputChange = (e)=>{ const { name, value } = e.target; setNewTask({ ...newTask, [name]: value }); }; const toggleStatus = (id)=>{ const updatedTasks = tasks.map((task)=>task.id === id ? { ...task, status: task.status === "完了" ? "未完了" : "完了" } : task); setTasks(updatedTasks); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-[#f4f4f4] min-h-screen font-sans", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-medium mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "ToDo管理アプリ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-2 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 rounded", type: "text", placeholder: "タスクを追加", name: "title", value: newTask.title, onChange: handleInputChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 rounded", type: "text", placeholder: "カテゴリ", name: "category", value: newTask.category, onChange: handleInputChange, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 rounded", type: "date", name: "dueDate", value: newTask.dueDate, onChange: handleInputChange, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-gray-300 rounded", name: "priority", value: newTask.priority, onChange: handleInputChange, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "高", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "高"), /*#__PURE__*/ React.createElement("option", { value: "中", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "中"), /*#__PURE__*/ React.createElement("option", { value: "低", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "低")), /*#__PURE__*/ React.createElement(TextareaModifier, { value: newTask.description, onChange: handleInputChange, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", type: "submit", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: "flex justify-between items-center border-b border-gray-300 py-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `flex-1 ${task.status === "完了" ? "line-through" : ""}`, __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, task.title, " - ", task.category, " - ", task.dueDate, " - ", task.priority), /*#__PURE__*/ React.createElement("span", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "form-checkbox h-5 w-5", checked: task.status === "完了", onChange: ()=>toggleStatus(task.id), __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }))))))); }