function MainComponent() { const [todos, setTodos] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const handleInputChange = (e)=>setInputValue(e.target.value); const handleSubmit = (e)=>{ e.preventDefault(); if (!inputValue.trim()) return; setTodos([ ...todos, inputValue ]); setInputValue(""); }; const handleDelete = (index)=>{ const newTodos = todos.filter((_, i)=>i !== index); setTodos(newTodos); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#141414] min-h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#181818] w-full max-w-[600px] shadow-2xl rounded-lg p-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto text-3xl mb-8 text-[#e5e5e5]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Todoアプリ"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "todoInput", placeholder: "新しいタスクを追加...", value: inputValue, onChange: handleInputChange, className: "w-full p-4 border-0 border-b-4 border-[#e5e5e5] bg-transparent text-white placeholder-[#e5e5e5] focus:ring-0 focus:border-[#E50914]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#E50914] text-white py-4 rounded-md mt-6 hover:bg-[#B81D24] transition-colors", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "タスクを追加")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, todos.map((todo, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-[#252525] flex justify-between items-center py-4 px-6 rounded-md mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#e5e5e5]", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, todo), /*#__PURE__*/ React.createElement("button", { className: "text-[#e5e5e5] hover:text-[#E50914]", onClick: ()=>handleDelete(index), __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }))))))); }