Merge pull request #2607 from stakwork/feature/search-clear

feat: added clear for graph search
stakwork · Jan 10, 2025 · a9aecb1 · a9aecb1
2 parents 8d5a26c + ebceea5
commit a9aecb1
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/src/components/Universe/GraphSearch/index.tsx b/src/components/Universe/GraphSearch/index.tsx
@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import ClearIcon from '~/components/Icons/ClearIcon'
 import { useGraphStore } from '~/stores/useGraphStore'
 import { colors } from '~/utils'
 
@@ -14,14 +16,23 @@ export const GraphSearch = () => {
         type="text"
         value={searchQuery}
       />
+      <InputButton
+        data-testid="search_action_icon"
+        onClick={() => {
+          setSearchQuery('')
+        }}
+      >
+        <>{searchQuery?.trim() ? <ClearIcon /> : null}</>
+      </InputButton>
     </Wrapper>
   )
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled(Flex)`
   position: absolute;
   top: 20px;
   left: 20px;
+  flex-direction: 'row';
 `
 
 const Input = styled.input.attrs(() => ({
@@ -55,10 +66,6 @@ const Input = styled.input.attrs(() => ({
     outline: 1px solid ${colors.primaryBlue};
   }
 
-  &:hover {
-    background: ${colors.black};
-  }
-
   &::placeholder {
     color: ${colors.GRAY7};
   }
@@ -73,3 +80,17 @@ const Input = styled.input.attrs(() => ({
       background-repeat: no-repeat;
     `}
 `
+
+const InputButton = styled(Flex).attrs({
+  align: 'center',
+  justify: 'center',
+  p: 5,
+})`
+  font-size: 32px;
+  color: ${colors.mainBottomIcons};
+  cursor: pointer;
+  transition-duration: 0.2s;
+  margin-left: -42px;
+  z-index: 2;
+  width: 30px;
+`