packages/instant/src/components/search_input.tsx


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

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,
};