function MainComponent() { const [tasks, setTasks] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [dateValue, setDateValue] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); if (!inputValue.trim()) return; setTasks([ ...tasks, { task: inputValue, date: dateValue } ]); setInputValue(''); setDateValue(''); }; const handleRemove = (index)=>{ const newTasks = [ ...tasks ]; newTasks.splice(index, 1); setTasks(newTasks); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex flex-col items-center pt-8", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-2xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "ToDo アプリ"), /*#__PURE__*/ React.createElement("form", { className: "flex gap-2 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "todoInput", placeholder: "タスクを追加", className: "p-2 w-[200px] border border-gray-300 rounded shadow-md", value: inputValue, onChange: (e)=>setInputValue(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "todoDate", className: "p-2 border border-gray-300 rounded shadow-md", value: dateValue, onChange: (e)=>setDateValue(e.target.value), __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex items-center justify-center bg-[#0081a7] text-white p-2 rounded w-20", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-300", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center p-4 bg-white shadow-md rounded mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, task.task, " - ", task.date), /*#__PURE__*/ React.createElement("button", { className: "text-[#fe6d73]", onClick: ()=>handleRemove(index), __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }))))))); }