Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 1x 1x 8x 1x 8x 1x 8x 1x | import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import { Input } from '../../Atoms/Inputs' import { Icon } from '../../Atoms/Icons' const Wrapper = styled.div` display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; ` const SearchInput = styled(Input)` background-color: ${(props) => props.theme['searchBarInputBackgroundColor']}; border-top-right-radius: 0; border-bottom-right-radius: 0; ` const IconContainer = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; width: 60px; height: 52px; background-color: ${(props) => props.theme['searchBarIconBackgroundColor']}; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; ` const SearchBar = ({ children, value, onChange, onClick, ...rest }) => ( <Wrapper> <SearchInput onChange={onChange} value={value} {...rest} /> <IconContainer> <Icon name="search-filled" onClick={onClick} selectable size="20px" /> </IconContainer> </Wrapper> ) SearchBar.propTypes = { children: PropTypes.node, onChange: PropTypes.func, onClick: PropTypes.func, value: PropTypes.any, } export default SearchBar |