From 16bfd4cdf8e6ea8e83dd354714803941703ad29f Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Mon, 17 Aug 2020 03:01:11 -0400
Subject: [PATCH] SeachInput: add clear button for query

---
 src/components/SearchInput/SearchInput.css | 4 ++++
 src/components/SearchInput/SearchInput.tsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
index 098a298..f86e121 100644
--- a/src/components/SearchInput/SearchInput.css
+++ b/src/components/SearchInput/SearchInput.css
@@ -39,3 +39,7 @@
 .search-bar input::placeholder {
   color: black;
 }
+
+.clear-icon {
+  cursor: pointer;
+}
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index c1dcde0..ec1760e 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useRecoilState } from "recoil";
-import { MagnifyingGlass } from "phosphor-react";
+import { MagnifyingGlass, X } from "phosphor-react";
 
 import { searchQueryAtom } from "../../state/atoms";
 import "./SearchInput.css";
@@ -25,6 +25,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         placeholder="Search for an icon"
         onChange={handleSearchChange}
       />
+      {query && <X className="clear-icon" size={18} onClick={() => setQuery("")} />}
     </div>
   );
 };