) {
11 | e.preventDefault();
12 |
13 | if (!input.trim()) return;
14 |
15 | onSubmit(input);
16 | setInput("");
17 | }
18 |
19 | return (
20 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/TodoItem.tsx:
--------------------------------------------------------------------------------
1 | import { Trash2 } from "lucide-react";
2 | import { Todo } from "../types/todo";
3 |
4 | interface TodoItemProps {
5 | todo: Todo;
6 | onCompletedChange: (id: number, completed: boolean) => void;
7 | onDelete: (id: number) => void;
8 | }
9 |
10 | export default function TodoItem({
11 | todo,
12 | onCompletedChange,
13 | onDelete,
14 | }: TodoItemProps) {
15 | return (
16 |
17 |
28 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/TodoList.tsx:
--------------------------------------------------------------------------------
1 | import { Todo } from "../types/todo";
2 | import TodoItem from "./TodoItem";
3 |
4 | interface TodoListProps {
5 | todos: Todo[];
6 | onCompletedChange: (id: number, completed: boolean) => void;
7 | onDelete: (id: number) => void;
8 | }
9 |
10 | export default function TodoList({
11 | todos,
12 | onCompletedChange,
13 | onDelete,
14 | }: TodoListProps) {
15 | const todosSorted = todos.sort((a, b) => {
16 | if (a.completed === b.completed) {
17 | return b.id - a.id;
18 | }
19 | return a.completed ? 1 : -1;
20 | });
21 |
22 | return (
23 | <>
24 |
25 | {todosSorted.map((todo) => (
26 |
32 | ))}
33 |
34 | {todos.length === 0 && (
35 |
36 | No todos yet. Add a new one above.
37 |
38 | )}
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/TodoSummary.tsx:
--------------------------------------------------------------------------------
1 | import { Todo } from "../types/todo";
2 |
3 | interface TodoSummaryProps {
4 | todos: Todo[];
5 | deleteAllCompleted: () => void;
6 | }
7 |
8 | export default function TodoSummary({
9 | todos,
10 | deleteAllCompleted,
11 | }: TodoSummaryProps) {
12 | const completedTodos = todos.filter((todo) => todo.completed);
13 |
14 | return (
15 |
16 |
17 | {completedTodos.length}/{todos.length} todos completed
18 |
19 | {completedTodos.length > 0 && (
20 |
26 | )}
27 |