From 755d8563d8c9a5876905e314c63c7dfdbf035957 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 25 Apr 2022 13:50:40 -0700
Subject: [PATCH] Add a clear button to the search bar

---
 .../templates/homeFeed/LibrarySearchBar.tsx         | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
index 3107c7da2..770ee791e 100644
--- a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
@@ -8,6 +8,8 @@ import { DropdownOption, Dropdown } from '../../elements/DropdownElements'
 import { FormInput } from '../../elements/FormElements'
 import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
+import { Button } from '../../elements/Button'
+import { X } from 'phosphor-react'
 
 type LibrarySearchBarProps = {
   searchTerm?: string
@@ -108,8 +110,17 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
             />
           </form>
         </Box>
+        {searchTerm && (
+          <Button style='plainIcon' onClick={(event) => {
+              event.preventDefault()
+              setSearchTerm('')
+              props.applySearchQuery('')
+              inputRef.current?.blur()
+            }} css={{ display: 'flex', flexDirection: 'row', mx: '8px', height: '100%', alignItems: 'center' }}>
+              <X width={16} height={16} color={theme.colors.grayTextContrast.toString()} />
+          </Button>
+        )}
       </HStack>
-      {/* <Button>Clear current search</Button> */}
     </VStack>
   )
 }