From a998a38adb2b92cbe8dc4ce4e7dc9e714aa38ea4 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 19 Oct 2023 10:54:16 +0300
Subject: [PATCH] feat: add state to search story

---
 .../ValidatorsTabs/SearchInput.stories.tsx           | 12 +++++++++---
 .../ValidatorsTabs/ValidatorListItem.tsx             |  4 +---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/General/RightSideBar/ValidatorsTabs/SearchInput.stories.tsx b/src/components/General/RightSideBar/ValidatorsTabs/SearchInput.stories.tsx
index b8960d0e..ef25a026 100644
--- a/src/components/General/RightSideBar/ValidatorsTabs/SearchInput.stories.tsx
+++ b/src/components/General/RightSideBar/ValidatorsTabs/SearchInput.stories.tsx
@@ -1,5 +1,5 @@
+import { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-
 import SearchInput from './SearchInput'
 
 const meta = {
@@ -14,6 +14,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: { value: 'Search value' },
+export const Default: Story = (args: { value: string }) => {
+  const [searchValue, setSearchValue] = useState(args.value)
+
+  return <SearchInput value={searchValue} changeSearchValue={setSearchValue} />
+}
+
+Default.args = {
+  value: '',
 }
diff --git a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
index 99c300cf..e73c63ae 100644
--- a/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
+++ b/src/components/General/RightSideBar/ValidatorsTabs/ValidatorListItem.tsx
@@ -26,8 +26,6 @@ const ValidatorListItem = ({
   const handleMouseLeave = () => setIsHovered(false)
   const handleClick = () => setIsSelected(!isSelected)
 
-  const backgroundColor = isSelected || isHovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'
-
   return (
     <XStack
       onMouseEnter={handleMouseEnter}
@@ -38,7 +36,7 @@ const ValidatorListItem = ({
       style={{
         padding: '6px 8px',
         borderRadius: '12px',
-        backgroundColor,
+        backgroundColor: (isSelected || isHovered) && 'rgba(42, 74, 245, 0.05)',
         cursor: 'pointer',
       }}
       width="92%"