New components

[dovchar]

No description provided.

[dovchar]

find:
const TaskList = ({ tasks, onEdit, onDelete, onToggleComplete }) => {
return (

TODO

{tasks.filter(task => !task.completed).map((task) => (

<input
type="checkbox"
checked={task.completed}
onChange={() => onToggleComplete(task.id)}
className="mr-2"
/>
{task.name}

<button onClick={() => onEdit(task.id)} className="text-xs text-blue-500 hover:underline mr-2">Edit
<button onClick={() => onDelete(task.id)} className="text-xs text-red-500 hover:underline">Delete

))}

COMPLETED

{tasks.filter(task => task.completed).map((task) => (

<input
type="checkbox"
checked={task.completed}
onChange={() => onToggleComplete(task.id)}
className="mr-2"
/>
{task.name}

<button onClick={() => onEdit(task.id)} className="text-xs text-blue-500 hover:underline mr-2">Edit
<button onClick={() => onDelete(task.id)} className="text-xs text-red-500 hover:underline">Delete

))}

);
};
replace:
const TaskList = ({ tasks, onEdit, onDelete, onToggleComplete }) => {
const renderTasks = (tasks, completed) => (
tasks.filter(task => task.completed === completed).map((task) => (

<input
type="checkbox"
checked={task.completed}
onChange={() => onToggleComplete(task.id)}
className="mr-2"
/>
<span className={text-sm ${task.completed ? 'line-through' : ''}}>{task.name}

<button onClick={() => onEdit(task.id)} className="text-xs text-blue-500 hover:underline mr-2">Edit
<button onClick={() => onDelete(task.id)} className="text-xs text-red-500 hover:underline">Delete

))
);

return (

TODO

{renderTasks(tasks, false)}

COMPLETED

{renderTasks(tasks, true)}

);
};
message:
To improve readability and reduce redundancy, I extracted the common rendering code for tasks into a helper function called renderTasks.