add task solution

src/App.tsx

@@ -2,7 +2,7 @@ import React, { FormEvent, useEffect, useState } from 'react';
 import { Todo } from './types/Todo';
 import { FilterType } from './types/FilterType';
 import { Header } from './components/Header';
-import { Section } from './components/Section';
+import { TodoList } from './components/TodoList';
 import { Footer } from './components/Footer';
 import { useTodos } from './context/TodoContext';
 
@@ -99,7 +99,7 @@ export const App: React.FC = () => {
           changeTodoId={changeTodoId}
           updateCompleted={updateCompleted}
         />
-        <Section
+        <TodoList
           filter={filter}
           updateCompleted={updateCompleted}
           changeTodoId={changeTodoId}

src/components/Section.tsx → src/components/TodoList.tsx

@@ -19,7 +19,7 @@ type Props = {
   handleBlur: (todoItem: Todo) => void;
   deleteTodoHandler: (todoId: number) => void;
 };
-export const Section: React.FC<Props> = ({
+export const TodoList: React.FC<Props> = ({
   filter,
   updateCompleted,
   changeTodoId,

src/index.tsx

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client';
 
 import 'bulma/css/bulma.css';
-import '@fortawesome/fontawesome-free/css/all.css';
 import './styles/index.scss';
 
 import { App } from './App';

src/styles/index.scss

@@ -2,6 +2,10 @@ iframe {
   display: none;
 }
 
+html {
+  background-color: #fff;
+}
+
 body {
   min-width: 230px;
   max-width: 550px;
@@ -21,5 +25,5 @@ body {
 }
 
 @import './todoapp';
-@import './todo';
-@import './filter';
+@import './todo-list';
+@import './filters';

src/styles/todo.scss → src/styles/todo-list.scss

@@ -15,13 +15,13 @@
 
   &__status-label {
     cursor: pointer;
-    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
     background-repeat: no-repeat;
     background-position: center left;
   }
 
   &.completed &__status-label {
-    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
   }
 
   &__status {
@@ -92,58 +92,8 @@
 
   .overlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 58px;
+    inset: 0;
 
     opacity: 0.5;
   }
 }
-
-.item-enter {
-  max-height: 0;
-}
-
-.item-enter-active {
-  overflow: hidden;
-  max-height: 58px;
-  transition: max-height 0.3s ease-in-out;
-}
-
-.item-exit {
-  max-height: 58px;
-}
-
-.item-exit-active {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.3s ease-in-out;
-}
-
-.temp-item-enter {
-  max-height: 0;
-}
-
-.temp-item-enter-active {
-  overflow: hidden;
-  max-height: 58px;
-  transition: max-height 0.3s ease-in-out;
-}
-
-.temp-item-exit {
-  max-height: 58px;
-}
-
-.temp-item-exit-active {
-  transform: translateY(-58px);
-  max-height: 0;
-  opacity: 0;
-  transition: 0.3s ease-in-out;
-  transition-property: opacity, max-height, transform;
-}
-
-.has-error .temp-item-exit-active {
-  transform: translateY(0);
-  overflow: hidden;
-}

src/styles/todoapp.scss

@@ -1,6 +1,5 @@
-
 .todoapp {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 24px;
   font-weight: 300;
   color: #4d4d4d;
@@ -9,7 +8,8 @@
   &__content {
     margin-bottom: 20px;
     background: #fff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    box-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.2),
       0 25px 50px 0 rgba(0, 0, 0, 0.1);
   }
 
@@ -49,7 +49,7 @@
     }
 
     &::before {
-      content: "❯";
+      content: '❯';
       transform: translateY(2px) rotate(90deg);
       line-height: 0;
     }
@@ -69,7 +69,7 @@
 
     border: none;
     background: rgba(0, 0, 0, 0.01);
-    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
 
     &::placeholder {
       font-style: italic;
@@ -97,7 +97,8 @@
     text-align: center;
     border-top: 1px solid #e6e6e6;
 
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+    box-shadow:
+      0 1px 1px rgba(0, 0, 0, 0.2),
       0 8px 0 -3px #f6f6f6,
       0 9px 1px -3px rgba(0, 0, 0, 0.2),
       0 16px 0 -6px #f6f6f6,
@@ -121,7 +122,6 @@
     appearance: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    transition: opacity 0.3s;
 
     &:hover {
       text-decoration: underline;
@@ -130,9 +130,5 @@
     &:active {
       text-decoration: none;
     }
-
-    &:disabled {
-      visibility: hidden;
-    }
   }
 }