feat: add state to search story

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 = {
+export const Default: Story = (args: { value: string }) => {
-  args: { value: 'Search value' },
+  const [searchValue, setSearchValue] = useState(args.value)
+
+  return <SearchInput value={searchValue} changeSearchValue={setSearchValue} />
+}
+
+Default.args = {
+  value: '',
 }

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%"