aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/search_input.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-02 09:55:37 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-02 09:55:37 +0800
commite2ff7b7c846fa97b56d6bd36192329dd8f485af0 (patch)
treeb4f6bf7cc949f9f5c98ed0f21bf700a5c18298fc /packages/instant/src/components/search_input.tsx
parent209b2c9dcb6e9e81011b64e7b8bad719dec35379 (diff)
downloaddexon-sol-tools-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar
dexon-sol-tools-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.gz
dexon-sol-tools-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.bz2
dexon-sol-tools-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.lz
dexon-sol-tools-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.xz
dexon-sol-tools-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.zst
dexon-sol-tools-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.tsx26
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,
+};