41 lines
946 B
TypeScript
41 lines
946 B
TypeScript
import {
|
|
Center,
|
|
InputGroup,
|
|
Input,
|
|
InputRightElement,
|
|
Button,
|
|
} from "@chakra-ui/react";
|
|
import { CloseIcon } from "@chakra-ui/icons";
|
|
|
|
interface DappsSearchParams {
|
|
searchSafeDapp: string | undefined;
|
|
setSearchSafeDapp: (value: string) => void;
|
|
}
|
|
|
|
function DappsSearch({ searchSafeDapp, setSearchSafeDapp }: DappsSearchParams) {
|
|
return (
|
|
<Center pb="0.5rem">
|
|
<InputGroup maxW="30rem">
|
|
<Input
|
|
placeholder="search 🔎"
|
|
value={searchSafeDapp}
|
|
onChange={(e) => setSearchSafeDapp(e.target.value)}
|
|
/>
|
|
{searchSafeDapp && (
|
|
<InputRightElement width="3rem">
|
|
<Button
|
|
size="xs"
|
|
variant={"ghost"}
|
|
onClick={() => setSearchSafeDapp("")}
|
|
>
|
|
<CloseIcon />
|
|
</Button>
|
|
</InputRightElement>
|
|
)}
|
|
</InputGroup>
|
|
</Center>
|
|
);
|
|
}
|
|
|
|
export default DappsSearch;
|