Skip to content

Commit b2c2d80

Browse files
gokulvijclaude
andcommitted
Update search input for Chakra UI v3
- Remove InputGroup and InputLeftElement - Use Flex and Icon for search input layout - Maintain clear button and search functionality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 70e42e4 commit b2c2d80

File tree

1 file changed

+25
-18
lines changed

1 file changed

+25
-18
lines changed

thingconnect.pulse.client/src/components/status/StatusFilters.tsx

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { HStack, Input, Button, Box, Flex, Icon, Menu, Text } from '@chakra-ui/react';
2-
import { X, CheckCircle, XCircle } from 'lucide-react';
1+
import { HStack, Input, Button, Box, Icon, Menu, Text, Flex } from '@chakra-ui/react';
2+
import { X, CheckCircle } from 'lucide-react';
33
import type { LiveStatusParams } from '@/api/types';
44
import { MdSearch, MdExpandMore } from 'react-icons/md';
55

@@ -108,33 +108,40 @@ export function StatusFilters({
108108
</Menu.Root>
109109

110110
{/* Search Input */}
111-
<Flex align='center' position='relative' w='80'>
112-
<Icon as={MdSearch} position='absolute' left='3' top='50%' transform='translateY(-50%)' zIndex={2} color='gray.400' />
111+
<Flex w='80' position='relative' align='center'>
112+
<Icon
113+
as={MdSearch}
114+
color='gray.400'
115+
position='absolute'
116+
left='3'
117+
top='50%'
118+
transform='translateY(-50%)'
119+
zIndex={2}
120+
fontSize={'18px'}
121+
/>
113122
<Input
114123
placeholder='Search endpoints by name or host...'
115-
ps='10'
116-
pe={searchTerm ? '10' : '4'}
124+
pl='10'
125+
pr={searchTerm ? '10' : '4'}
117126
borderColor='gray.300'
118127
value={searchTerm}
119128
onChange={e => handleSearchChange(e.target.value)}
120129
data-testid='search-input'
121-
pr={searchTerm ? '10' : '4'}
122130
/>
123131
{searchTerm && (
124-
<Button
132+
<Box
133+
px={3}
134+
onClick={clearSearch}
135+
data-testid='clear-search'
125136
position='absolute'
126-
right='2'
137+
right='0'
127138
top='50%'
128139
transform='translateY(-50%)'
129-
variant='ghost'
130-
size='sm'
131-
p={0}
132-
onClick={clearSearch}
133-
data-testid='clear-search'
134-
zIndex={3}
140+
zIndex={10}
141+
cursor={'pointer'}
135142
>
136-
<XCircle size={16} color='gray.500' />
137-
</Button>
143+
<X size={16} />
144+
</Box>
138145
)}
139146
</Flex>
140147
<Menu.Root>
@@ -196,4 +203,4 @@ export function StatusFilters({
196203
</HStack>
197204
</Box>
198205
);
199-
}
206+
}

0 commit comments

Comments
 (0)