feat: Create a SearchInput component

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 }) => (
+  <div className={cx(styles.container, className)}>
+    <input {...props} className={styles.input} type="text" />
+    <FeatherIcon name="search" className={styles.icon} />
+  </div>
+);
+
+SearchInput.propTypes = {
+  className: PropTypes.string,
+};
+
+export default SearchInput;

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);
+}