diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 09:55:37 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 09:55:37 +0800 |
commit | e2ff7b7c846fa97b56d6bd36192329dd8f485af0 (patch) | |
tree | b4f6bf7cc949f9f5c98ed0f21bf700a5c18298fc /packages/instant/src/components/search_input.tsx | |
parent | 209b2c9dcb6e9e81011b64e7b8bad719dec35379 (diff) | |
download | dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.gz dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.zst dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.zip |
feat: add basic token search functionality
Diffstat (limited to 'packages/instant/src/components/search_input.tsx')
-rw-r--r-- | packages/instant/src/components/search_input.tsx | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx new file mode 100644 index 000000000..f082eaa16 --- /dev/null +++ b/packages/instant/src/components/search_input.tsx @@ -0,0 +1,26 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container, Flex, Icon, Input, InputProps } from './ui'; + +export interface SearchInputProps extends InputProps { + backgroundColor?: ColorOption; +} + +export const SearchInput: React.StatelessComponent<SearchInputProps> = props => ( + <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em"> + <Flex justify="flex-start" align="flex-end"> + <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" /> + <Input {...props} fontSize="14px" fontColor={props.fontColor} /> + </Flex> + </Container> +); + +SearchInput.displayName = 'SearchInput'; + +SearchInput.defaultProps = { + backgroundColor: ColorOption.lightestGrey, + fontColor: ColorOption.grey, +}; |