added delete all component and style

src/App.js

@@ -4,6 +4,7 @@ import React from "react";
 import Heading from "./components/Heading/Heading";
 import AddTodo from "./components/AddTodo/AddTodo";
 import FilterTodo from "./components/FilterTodo/FilterTodo";
+import DeleteAllTodo from "./components/DeleteAllTodo/DeleteAllTodo";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
       <div className="flex-basic">
         <AddTodo />
         <FilterTodo />
+        <DeleteAllTodo />
       </div>
     </>
   );

src/components/DeleteAllTodo/DeleteAllTodo.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { StyledDeleteAllTodo } from "./StyledDeleteAllTodo";
+
+function DeleteAllTodo() {
+  return (
+    <StyledDeleteAllTodo>
+      <button class="dlt-btn dlt-all-btn">
+        <i class="fas fa-trash"></i>
+      </button>
+    </StyledDeleteAllTodo>
+  );
+}
+
+export default DeleteAllTodo;

src/components/DeleteAllTodo/StyledDeleteAllTodo.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const StyledDeleteAllTodo = styled.section`
+  .dlt-btn {
+    background-color: #ff6f47;
+    color: #fff;
+    border: none;
+    padding: 1rem;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .dlt-all-btn {
+    height: 38px;
+    text-align: center;
+    font-size: 14px;
+    padding-top: 0.8rem;
+    cursor: pointer;
+  }
+
+  .fa-trash {
+    pointer-events: none;
+  }
+`;