Add button to clear search list

islands/App.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "preact/hooks";
 import AddToList from "../islands/AddToList.tsx";
 import CountList from "../islands/CountList.tsx";
 import Search from "../types/Search.ts";
+import { Button } from "../components/Button.tsx";
 
 export default function App() {
   const [searchList, setSearchList] = useState([] as Search[]);
@@ -16,13 +17,19 @@ export default function App() {
 
   function addTerm(newSearch: Search) {
     const newList = [...searchList, newSearch];
+
     setSearchList(newList);
     localStorage.setItem(
       "seekerList",
       JSON.stringify(newList),
     );
   }
 
+  function clearList() {
+    setSearchList([]);
+    localStorage.removeItem("seekerList");
+  }
+
   return (
     <>
       <h1 class="text-4xl font-bold pb-4 text-white">The Seeker</h1>
@@ -32,6 +39,7 @@ export default function App() {
       </p>
       <AddToList addTerm={addTerm} />
       <CountList searchList={searchList} />
+      {searchList.length > 0 && <Button onClick={clearList}>Clear list</Button>}
     </>
   );
 }