diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js new file mode 100644 index 000000000..bc6dbb4d9 --- /dev/null +++ b/src/components/SearchInput.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import FeatherIcon from './FeatherIcon'; +import styles from './SearchInput.module.scss'; + +const SearchInput = ({ className, ...props }) => ( +
+ + +
+); + +SearchInput.propTypes = { + className: PropTypes.string, +}; + +export default SearchInput; diff --git a/src/components/SearchInput.module.scss b/src/components/SearchInput.module.scss new file mode 100644 index 000000000..bf48fcaef --- /dev/null +++ b/src/components/SearchInput.module.scss @@ -0,0 +1,19 @@ +.container { + display: inline-flex; + align-items: center; + width: 100%; + position: relative; +} + +.icon { + position: absolute; + right: 0.5rem; + stroke: var(--color-neutrals-700); +} + +.input { + width: 100%; + font-size: 0.875rem; + padding: 0.5rem; + padding-right: calc(1rem + 1em); +}