Spaces:
Configuration error
Configuration error
File size: 1,743 Bytes
7bbd534 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
'use client';
import {
IconButton,
Input,
InputGroup,
InputLeftElement,
useColorModeValue,
} from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons';
export function SearchBar(props: {
variant?: string;
background?: string;
children?: JSX.Element;
placeholder?: string;
borderRadius?: string | number;
[x: string]: any;
}) {
// Pass the computed styles into the `__css` prop
const { variant, background, children, placeholder, borderRadius, ...rest } =
props;
// Chakra Color Mode
const searchIconColor = useColorModeValue('gray.700', 'white');
const inputBg = useColorModeValue('secondaryGray.300', 'navy.900');
const inputText = useColorModeValue('gray.700', 'gray.100');
return (
<InputGroup w={{ base: '100%', md: '200px' }} {...rest}>
<InputLeftElement>
<IconButton
aria-label="search"
bg="inherit"
borderRadius="inherit"
_active={{
bg: 'inherit',
transform: 'none',
borderColor: 'transparent',
}}
_hover={{
bg: 'inherit',
transform: 'none',
borderColor: 'transparent',
}}
_focus={{
boxShadow: 'none',
}}
icon={<SearchIcon color={searchIconColor} w="14px" h="14px" />}
/>
</InputLeftElement>
<Input
variant="search"
fontSize="sm"
bg={background ? background : inputBg}
color={inputText}
fontWeight="500"
_placeholder={{ color: 'gray.500', fontSize: '14px' }}
borderRadius={borderRadius ? borderRadius : '30px'}
placeholder={placeholder ? placeholder : 'Search'}
/>
</InputGroup>
);
}
|