add button and filter- need help

src/components/Footer.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { TodoContext } from '../context/TodoContext';
+import { TodosFilter } from './TodoFilter';
+
+export const Footer: React.FC = () => {
+  const { todos, setTodos } = useContext(TodoContext);
+
+  const itemsLeft = todos.filter(todo => !todo.completed).length;
+
+  const handleClearCompleted = () => {
+    // Filter out completed todos and update the state
+    const uncompletedTodos = todos.filter(todo => !todo.completed);
+
+    setTodos(uncompletedTodos);
+  };
+
+  return (
+    <footer className="footer">
+      <span className="todo-count" data-cy="todosCounter">
+        {`${itemsLeft} item${itemsLeft !== 1 ? 's' : ''} left`}
+      </span>
+
+      <TodosFilter />
+
+      <button
+        type="button"
+        className="clear-completed"
+        onClick={handleClearCompleted}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};

src/components/TodoFilter.tsx

@@ -0,0 +1,46 @@
+// TodosFilter.tsx
+import React, { useState } from 'react';
+
+enum Status {
+  All = 'All',
+  Active = 'Active',
+  Completed = 'Completed',
+}
+
+export const TodosFilter: React.FC = () => {
+  const [filter, setFilter] = useState<Status>(Status.All);
+
+  const handleFilterChange = (status: Status) => {
+    setFilter(status);
+  };
+
+  return (
+    <ul className="filters">
+      <li>
+        <a
+          href="#/"
+          className={filter === Status.All ? 'active' : ''}
+          onClick={() => handleFilterChange(Status.All)}
+        >
+          All
+        </a>
+      </li>
+      <li>
+        <a
+          href="#/active"
+          onClick={() => handleFilterChange(Status.Active)}
+        >
+          Active
+        </a>
+      </li>
+      <li>
+        <a
+          href="#/completed"
+          onClick={() => handleFilterChange(Status.Completed)}
+        >
+          Completed
+        </a>
+      </li>
+    </ul>
+  );
+};