From ebceea5c0c1d0635ffe2ece41339f3f5e83e4e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Fri, 10 Jan 2025 23:44:23 +0300
Subject: [PATCH] feat: added clear for graph search

---
 src/components/Universe/GraphSearch/index.tsx | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/Universe/GraphSearch/index.tsx b/src/components/Universe/GraphSearch/index.tsx
index 7ff8ec4af..4bbe68b9a 100644
--- 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;
+`