function MainComponent() { const [tasks, setTasks] = React.useState([ { id: 1, text: 'サンプルタスク1', completed: false }, { id: 2, text: 'サンプルタスク2', completed: true } ]); const [newTask, setNewTask] = React.useState(''); const addTask = ()=>{ if (newTask.trim() !== '') { setTasks([ ...tasks, { id: Date.now(), text: newTask, completed: false } ]); setNewTask(''); } }; const toggleTask = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task)); }; const deleteTask = (id)=>{ setTasks(tasks.filter((task)=>task.id !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-extrabold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "タスク管理アプリ")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTask", className: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md mr-2", placeholder: "新しいタスクを入力", value: newTask, onChange: (e)=>setNewTask(e.target.value), __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", onClick: addTask, __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }), "追加")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: "flex items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `task${task.id}`, className: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mr-2", checked: task.completed, onChange: ()=>toggleTask(task.id), __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `flex-grow text-gray-700 ${task.completed ? 'line-through' : ''}`, __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, task.text), /*#__PURE__*/ React.createElement("button", { type: "button", className: "ml-2 inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", onClick: ()=>deleteTask(task.id), __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 px-4 py-4 sm:px-6 rounded-b-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, tasks.length, " 個のタスク | ", tasks.filter((t)=>t.completed).length, " 個完了"))))); }