45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { InputGroup } from "../../src/components/ui/input-group";
|
|
import { LuSearch } from "react-icons/lu";
|
|
import { ChangeEvent } from "react";
|
|
import { Input } from "@chakra-ui/react";
|
|
|
|
interface SearchComponentProps {
|
|
placeholder?: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
const SearchComponent = ({ placeholder = "Search...", value, onChange }: SearchComponentProps) => {
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
onChange(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<InputGroup
|
|
startElement={<LuSearch fontSize="xs" style={{ position: 'relative', left: '10px' }} />}
|
|
>
|
|
<>
|
|
{/* <InputLeftElement pointerEvents="none" position="relative" left="10px">
|
|
<LuSearch fontSize="xs" />
|
|
</InputLeftElement> */}
|
|
<Input
|
|
p={3}
|
|
w={300}
|
|
bg={"#fff"}
|
|
colorPalette={"blue"}
|
|
_focus={{ border: "1px solid #02A0A0" }}
|
|
rounded={"md"}
|
|
size={"xs"}
|
|
fontSize={"2sm"}
|
|
placeholder={placeholder}
|
|
bgColor={'#EEEEEE'}
|
|
ps={8}
|
|
value={value}
|
|
onChange={handleChange}
|
|
/>
|
|
</>
|
|
</InputGroup>
|
|
);
|
|
};
|
|
|
|
export default SearchComponent; |